利用Vue的v-for和v-bind实现列表颜色切换


Posted in Javascript onJuly 17, 2020

需求:

在页面上显示四个列表,初始时字体为黑色。

鼠标点击某一个列表时,该列表的颜色变为红色,其余列表仍为黑色。

代码实现:

<!-- css -->
<style>
 .red{
 color: red;
 }
</style>

<!-- html -->
<div id="app">
 <ul>
 <li v-for="item,index in movies" :class="{red: changeRed == index}" v-on:click="change(index)">{{item}}</li>
 </ul>
</div>

<!-- JavaScript -->
<script src="../JS/vue.js"></script>
<script>
 const app = new Vue({
 el: '#app',
 data: {
 movies: ['肖申克的救赎','泰坦尼克号','当幸福来敲门','流浪地球'],
 changeRed: -1
 },
 methods: {
 change:function (index) {
 this.changeRed=index;
 }
 }
 })
</script>

代码解释:

首先浏览器直接显示列表,因为此时没有监听到click事件。

当鼠标点击某一个列表时,Vue自动获取列表下标,并执行change(index)函数,改变changeRed的值,此时当前列表的v-bind:class="{red: changeRed == index}"中的red为true,当前一项列表显示为红色。其余列表的changeRed == index为false,所以不显示红色。

补充知识:vue学习(绑定class、v-bind:style(对象语法、数组语法))

vue 属性绑定

css

.class0{
 color: red;
 font-size: 10px;
 }

 .class00{
 color: blue;
 font-size: 70px;
 }

 .class2{
 color: yellow;
 font-size: 30px;
 }

 .class3{
 color: indianred;

 }

 .class4{
 font-size: 30px;
 }

1 class绑定

1.1 字符串绑定

<div id="app1">
 可以绑定一个默认class 字符串绑定class
 <p class="class0" :class="a"> xxxx是字符串 </p>

 <button @click="updates1"> 点击</button>
</div>
// 1.1 字符串绑定
 var a = new Vue({
 el:'#app1',
 data: {
  //绑定默认css属性
  a: "class1",
  b:"class0",

 },
  //动态切换css属性
  methods: {
  updates1 (){
   this.a = 'class2'

  }
  }
 });

1.2 对象绑定 和 数组绑定

<div id="app2">
 对象绑定class
 <p :class="{class2:isA,class00:isB}"> xxxx是对象 例如 :class="{class2:isA,class00:isB}"</p>

 <button @click="updates2"> 点击</button> <br>

 数组绑定class <br>
 <p :class="['class3','class4']"> xxxx是数组 例如 :class="[class3,class4]" </p>

</div>
//1.2 对象绑定
 var a = new Vue({
 el:'#app2',


 data: {
  //绑定默认css属性
  isA: true,
  isB: false,
 },
 //动态切换css属性
 methods: {
  updates2 (){
  this.isA = false;
  this.isB = true;
  }
 }


 });

图示

利用Vue的v-for和v-bind实现列表颜色切换

点击后

利用Vue的v-for和v-bind实现列表颜色切换

2 style 绑定

<div id="app3">
 <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">Style 绑定1 例如 :style="{ color: activeColor, fontSize: fontSize + 'px' }"</div>
 <div :style="objectCssStyle">Style 绑定2(绑定到一个样式对象通常更好) 例如 :style="objectCssStyle"</div>
 <div :style="[clSty1, clSty2]">Style 绑定3(数组语法) 例如 :style="[activeColor, fontSize]"</div>

 <button @click="updates4"> 点击</button>
</div>
// 2 style 绑定
 var a = new Vue({
 el:'#app3',
 data: {
  //绑定默认css属性
  activeColor: 'red',
  fontSize: 100,
  objectCssStyle:{
  color: 'red',
  fontSize: '10px'
  },
  objectCssStyle2:{
  color: 'yellow'
  },

  clSty1: {
  color: 'green',
  fontSize: '30px'
  },
  clSty2: {
  'font-weight': 'bold'
  }


 },
 //动态切换css属性
 methods: {
  updates4 (){
  this.activeColor = "blue";
  this.fontSize = 20;
  this.objectCssStyle = this.objectCssStyle2

  }
 }

 });

图示

利用Vue的v-for和v-bind实现列表颜色切换

点击后

利用Vue的v-for和v-bind实现列表颜色切换

以上这篇利用Vue的v-for和v-bind实现列表颜色切换就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js文件Cookie存取值示例代码
Feb 20 Javascript
优化Node.js Web应用运行速度的10个技巧
Sep 03 Javascript
javascript实现控制的多级下拉菜单
Jul 05 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
AngularJS表单基本操作
Jan 09 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
Jun 22 Javascript
Node.js log4js日志管理详解
Jul 31 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
Jun 05 Javascript
layui给下拉框、按钮状态、时间赋初始值的方法
Sep 10 Javascript
js实现盒子滚动动画效果
Aug 09 Javascript
vant 中van-list的用法说明
Nov 11 Javascript
基于js实现判断浏览器类型代码实例
Jul 17 #Javascript
Vue实现背景更换颜色操作
Jul 17 #Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 #Javascript
Vue 实现v-for循环的时候更改 class的样式名称
Jul 17 #Javascript
vue点击标签切换选中及互相排斥操作
Jul 17 #Javascript
Vue点击切换Class变化,实现Active当前样式操作
Jul 17 #Javascript
JS this关键字在ajax中使用出现问题解决方案
Jul 17 #Javascript
You might like
php 中include()与require()的对比
2006/10/09 PHP
php 设计模式之 单例模式
2008/12/19 PHP
PHP中实现中文字符进制转换原理分析
2011/12/06 PHP
PHP基于Closure类创建匿名函数的方法详解
2017/08/17 PHP
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
JavaScript函数表达式详解及实例
2017/05/05 Javascript
详解wow.js中各种特效对应的类名
2017/09/13 Javascript
使用clipboard.js实现复制功能的示例代码
2017/10/16 Javascript
浅谈Node 异步IO和事件循环
2019/05/05 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
vue引入静态js文件的方法
2020/06/20 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
[01:20:38]完美世界DOTA2联赛 GXR vs IO 第一场 11.07
2020/11/09 DOTA
Python实现竖排打印传单手机号码易撕条
2015/03/16 Python
python构建自定义回调函数详解
2017/06/20 Python
Python+matplotlib+numpy绘制精美的条形统计图
2018/01/02 Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
Python tkinter实现日期选择器
2021/02/22 Python
经济实惠的豪华家具:My-Furniture
2019/03/12 全球购物
铭立家具面试题
2012/12/06 面试题
优秀的计算机专业求职信范文
2013/12/27 职场文书
国际商务专业求职信
2014/07/15 职场文书
2014年防汛工作总结
2014/12/08 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
冬季作息时间调整通知
2015/04/24 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers