利用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刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
Jul 08 Javascript
js冒泡法和数组转换成字符串示例代码
Aug 14 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
Dec 14 Javascript
解决微信二次分享不显示摘要和图片的问题
Aug 18 Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 Javascript
js中DOM事件绑定分析
Mar 18 Javascript
详解react-redux插件入门
Apr 19 Javascript
js中split()方法得到的数组长度问题
Jul 19 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
基于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控制网页过期时间的代码
2008/09/28 PHP
php学习之function的用法
2012/07/14 PHP
PHP设计模式之命令模式的深入解析
2013/06/13 PHP
php实现的一个很好用HTML解析器类可用于采集数据
2013/09/23 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
Zend Framework教程之Zend_Config_Ini用法分析
2016/03/23 PHP
Smarty变量用法详解
2016/05/11 PHP
jquery插件制作教程 txtHover
2012/08/17 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
SeaJS入门教程系列之使用SeaJS(二)
2014/03/03 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
2015/02/05 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
基于jquery步骤进度条源码分享
2015/11/12 Javascript
跟我学习javascript的隐式强制转换
2015/11/16 Javascript
使用bootstrap3开发响应式网站
2016/05/12 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
关于 jQuery Easyui异步加载tree的问题解析
2016/12/06 Javascript
使用Promise链式调用解决多个异步回调的问题
2017/01/15 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
js实现继承的方法及优缺点总结
2019/05/08 Javascript
微信小程序3D轮播实现代码
2019/09/19 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
2019/11/29 Javascript
[07:12]2014DOTA2西雅图国际邀请赛 黑马Liquid专题采访
2014/07/12 DOTA
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
QML实现钟表效果
2020/06/02 Python
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
印尼在线旅游门户网站:NusaTrip
2019/11/01 全球购物
简述安装Slackware Linux系统的过程
2012/05/08 面试题
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
三项教育活动实施方案
2014/03/30 职场文书
社区母亲节活动总结
2015/02/10 职场文书
Python 可迭代对象 iterable的具体使用
2021/08/07 Python