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实现动态列表点击各行换色的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
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>
-
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.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
随机推荐
- vbs整人代码大集合 多年的代码收集
- 收集整理项目中常用到的正则表达式
- PHP递归返回值时出现的问题解决办法
- js中eval()函数和trim()去掉字符串左右空格应用
- python常见数制转换实例分析
- Android获取内置sdcard跟外置sdcard路径
- mysql中binlog_format模式与配置详细分析
- PHP 实现公历日期与农历日期的互转换
- 使用Node.js和Socket.IO扩展Django的实时处理功能
- Java获取最后插入MySQL记录的自增ID值的3种方法
- 用jquery仿做发微博功能示例
- 浅谈js中StringBuffer类的实现方法及使用
- Mybatis update数据库死锁之获取数据库连接池等待
- javascript事件处理模型实例说明
- 读jQuery之四(优雅的迭代)
- ajax在兼容模式下失效的快速解决方法
- 图片引发的溢出危机(图)
- 优化Oracle停机时间及数据库恢复
- 一个ASP.NET中使用的MessageBox类
- 深入理解memmove()与memcpy()的区别以及实现方法