vue实现动态列表点击各行换色的方法
只是模拟一练习 v-for v-on v-bind的一个简单demo
代码思路:
遍历出data里面的数据 v-for
给li加点击事件
绑定class样式 怎么控制样式的显示
通过 class的控制 v:bind:class={class:index==变量} 下标和class变量是否相等控制true false
代码:
<div id="app"> <ul> <li v-for='(item,index) in arr' v-bind:class='{bg:index==isactive}' @click='fn(index)'>{{item}}</li> </ul> </div> <script> var vm=new Vue({ el:'#app',//el element 获取容器 vue作用的范围 data:{ isactive:0, arr:['健康医疗','生活服务','信息安全','文化娱乐'], }, methods:{ fn:function(index){ //点击切换 变量的值 赋值为 index console.log(index); this.isactive=index; } } }) </script>
以上这篇vue实现动态列表点击各行换色的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
vue2.0中click点击当前li实现动态切换class
1,文件内容 ----//为item添加不存在的属性,需要使用vue提供的Vue.set( object, key, value )方法. 看详解:https://cn.vuejs.org/v2/api/#Vue-set <template> <div> <ul> <li v-for="(item,$index) in items" @click="selectStyle (item, $index) " :class=&
-
Vue点击切换颜色的方法
如下所示: <template> <div> <div v-for="(list,index) in siYuan" class="aa" :class="{ red:changeRed == index}" @click="change(index)">{{list.a}}</div> </div> </template> <script>
-
Vue.js实现按钮的动态绑定效果及实现代码
实现效果: 实现代码以及注释: <!DOCTYPE html> <html> <head> <title>按钮绑定</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte
-
vue实现动态列表点击各行换色的方法
只是模拟一练习 v-for v-on v-bind的一个简单demo 代码思路: 遍历出data里面的数据 v-for 给li加点击事件 绑定class样式 怎么控制样式的显示 通过 class的控制 v:bind:class={class:index==变量} 下标和class变量是否相等控制true false 代码: <div id="app"> <ul> <li v-for='(item,index) in arr' v-bind:class='{
-
基于vue循环列表时点击跳转页面的方法
1.在data数组里边添加id(说明:我的是虚拟数据) 2.在点击事件上传入id参数,如下: 3.在methods里边添加点击跳转的方法,不要忘记在function后边的括号内传入id,然后判断如果id==1,就跳转那个页面,id==2跳转那个页面. 至此跳转完成. 附加: 点击返回上一页方法: window.history.go(-1);就是返回上一页.(不要忘记在标签上添加click点击事件) returnS:function () { window.history.go(-1); } 以上
-
Vue + Scss 动态切换主题颜色实现换肤的示例代码
根据预设的配色方案,在前端实现动态切换系统主题颜色. 大概的思路就是给html根标签设置一个data-theme属性,然后通过js切换data-theme的属性值,Scss根据此属性来判断使用对应主题变量.这里可以选择持久化Vux或接口来保存用户选择的主题. 一.首先需要给项目下载配置Scss 1.安装依赖 npm install node-sass sass-loader --save-dev 2.找到build中webpack.base.conf.js,在rules中添加scss规则 { t
-
vue click.stop阻止点击事件继续传播的方法
如下所示: <div id="app"> <div v-on:click="dodo"> <button v-on:click="doThis">阻止单击事件继续传播</button> </div> </div> <script> var app = new Vue({ el: "#app", data: { name: "Vue.j
-
vue实现动态列表尾部添加数据执行动画
目录 动态列表尾部添加数据执行动画 先上动画 动态数据使用wowjs显示动画 1.通过npm安装 2.在main.js中引入animate.css 动态列表尾部添加数据执行动画 先上动画 动态控制节点数量(目前只显示6个节点) 尾部添加几个item,头部则删除几个item 触发 transition-group 动画 splice 的使用方法 代码: <style lang="scss"> .content { display: flex; width: 600px
-
vue中动态设置meta标签和title标签的方法
因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮,所有就需要手动设置meta标签,标题和内容 //router内的设置 { path: '/teachers', name: 'TDetail', component: TDetail, meta: { title:"教师详情", content: 'disable' } }, { path: '/article', name: 'Article', component: Article, meta: { t
-
使用JavaScript和CSS实现文本隔行换色的方法
先来看一个简单的方法. 在 css 中定义两种样式 .odd{...} 和 .even{...} 分别用于奇数行和偶数行的不同背景颜色.在网页加载后通过 javascript 获取要变色的标签列表,执行如下代码: // 当文件加载时,执行代码. window.onload = function() { // 获取<ul id="list" />对象 var list = document.getElementById('list'); // 获取list下面的所有li va
-
asp.net 水晶报表隔行换色实现方法
在报表中右键 -> Insert -> Sections,找到要设置背景色的区域,我这里是Details区域.在右边选项卡中选择Color,勾上背景色选项,设置好默认颜色.点击表达式按钮,输入以下代码. 复制代码 代码如下: if recordnumber mod 2=0 then Color (220, 225, 214) else crWhite 上面的代码需要说明的是Color()函数,这是水晶报表提供的设置自定义颜色函数,里面三个参数分别对应R.G.B三种基础颜色,通常我们必须把在CS
-
Vue动态生成el-checkbox点击无法赋值的解决方法
前言 最近遇到一个问题,在一个页面需要动态渲染页面内的表单,其中包括 checkbox 表单类型,并且使用 Element 组件 UI 时,此时 v-model 绑定的数据也是动态生成的 例如: 定义的 data 的 form 里面是空对象,需要动态生成里面的 key export default { data() { return { form: {} } }, } 从后端接口得到 checkList,这个就是动态生成的表单数据 v-for 循环 checkList,得到 key,然后直接 v
-
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
这里使用的是给被点击的li添加类名的方式 <template> <div class="person1"> <div v-for="(item,index) in lists" @click="clickAdd(index)" :key="index" :class="{red:i === index}"> <div>{{item.name}}</div
随机推荐
- 在Django中限制已登录用户的访问的方法
- 易语言基础教程之简单的人机交互
- 在javascript中如何得到中英文混合字符串的长度
- 新安装的XAMPP访问phpmyadmin出错的解决方法
- Python序列操作之进阶篇
- Python 爬虫爬取指定博客的所有文章
- 当mysqlbinlog版本与mysql不一致时可能导致出哪些问题
- Android实战教程第九篇之短信高效备份
- js 火狐下取本地路径实现思路
- sql 游标的使用—游标FOR循环小例子
- 简单介绍SQL Server里的闩锁
- CentOS 6.3下安装部署Oracle服务器图文教程
- php实现的RSS生成类实例
- javascript中call,apply,bind函数用法示例
- 利用IE Object Data漏洞制做全新网页木马(图)
- java读取某个文件夹下的所有文件实例代码
- Java判断用户输入月份的季节
- php编程中echo用逗号和用点号连接的区别
- 留言板翻页的实现详解
- 通过Cisco MDS 9000系列多层交换机扩展SAN