利用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 相关文章推荐
参考:关于Javascript中实现暂停的几篇文章
Mar 04 Javascript
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
JavaScript window.document的属性、方法和事件小结
Oct 24 Javascript
JS实现三个层重叠点击互相切换的方法
Oct 06 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
第一次动手实现bootstrap table分页效果
Sep 22 Javascript
JavaScript利用Date实现简单的倒计时实例
Jan 12 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 Javascript
微信小程序之判断页面滚动方向的示例代码
Aug 30 Javascript
Javascript新手入门之字符串拼接与变量的应用
Dec 03 Javascript
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 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
mysql 字段类型说明
2007/04/27 PHP
通过PHP的内置函数,通过DES算法对数据加密和解密
2012/06/21 PHP
Linux编译升级php的详细方法
2013/11/04 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
2016/06/26 Javascript
JavaScript实战(原生range和自定义特效)简单实例
2016/08/21 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
Vue组件实现触底判断
2019/06/26 Javascript
通过实例了解Nodejs模块系统及require机制
2020/07/16 NodeJs
vue 遮罩层阻止默认滚动事件操作
2020/07/28 Javascript
python获取从命令行输入数字的方法
2015/04/29 Python
使用Turtle画正螺旋线的方法
2017/09/22 Python
python matplotlib中文显示参数设置解析
2017/12/15 Python
Python实现进程同步和通信的方法
2018/01/02 Python
详解Python 函数如何重载?
2019/04/23 Python
在PyTorch中Tensor的查找和筛选例子
2019/08/18 Python
python如何保证输入键入数字的方法
2019/08/23 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
TCP/IP的分层模型
2013/10/27 面试题
视光学专业毕业生推荐信
2013/10/28 职场文书
学校司机岗位职责
2013/11/14 职场文书
中专生自我鉴定
2013/12/17 职场文书
超市5.1促销活动
2014/01/15 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
园艺师求职信
2014/04/27 职场文书
心理学专业求职信
2014/06/16 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
解决goland 导入项目后import里的包报红问题
2021/05/06 Golang
vue动态绑定style样式
2022/04/20 Vue.js
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python