利用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 相关文章推荐
Chrome下ifame父窗口调用子窗口的问题示例探讨
Mar 17 Javascript
js中string转int把String类型转化成int类型
Aug 13 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 Javascript
jQuery实现图片轮播特效代码分享
Sep 15 Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
React操作真实DOM实现动态吸底部的示例
Oct 23 Javascript
详解vue中axios的使用与封装
Mar 20 Javascript
express如何解决ajax跨域访问session失效问题详解
Jun 20 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 Javascript
jQuery实现移动端图片上传预览组件的方法分析
May 01 jQuery
vue实现input输入模糊查询的三种方式
Aug 14 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 读取和修改大文件的某行内容的代码
2009/10/30 PHP
PHP 开发环境配置(Zend Server安装)
2010/04/28 PHP
IIS6.0 开启Gzip方法及PHP Gzip函数分享
2014/06/08 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
PHP处理bmp格式图片的方法分析
2017/07/04 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
多广告投放代码 推荐
2006/11/13 Javascript
javascript调试说明
2010/06/07 Javascript
有趣的javascript数组定义方法
2010/09/10 Javascript
超轻量级的基于jquery的三级展开列表
2011/04/26 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
2012/09/19 Javascript
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
学习python的几条建议分享
2013/02/10 Python
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
css3针对移动端卡顿问题的解决(动画性能优化)
2020/02/14 HTML / CSS
详解基于canvas的视频遮罩插件
2018/01/04 HTML / CSS
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
自荐信如何“自荐”
2013/10/24 职场文书
中层干部培训方案
2014/06/16 职场文书
2014年行政部工作总结
2014/11/19 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
浅谈由position属性引申的css进阶讨论
2021/05/25 HTML / CSS