利用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模仿msgbox提示效果代码
Jun 10 Javascript
基于jquery的bankInput银行卡账号格式化
Aug 22 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
javascript定义变量时带var与不带var的区别分析
Jan 12 Javascript
js右下角弹出提示框示例代码
Jan 12 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
老生常谈onBlur事件与onfocus事件(js)
Jul 09 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
Nov 02 Javascript
vue中axios解决跨域问题和拦截器的使用方法
Mar 07 Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 Javascript
vue3.0搭配.net core实现文件上传组件
Oct 29 Javascript
vue3中轻松实现switch功能组件的全过程
Jan 07 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 ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
PHP扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
2009/03/21 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
Javascript同时声明一连串(多个)变量的方法
2017/01/23 Javascript
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
2019/04/29 Javascript
微信小程序实现获取用户信息并存入数据库操作示例
2019/05/07 Javascript
纯JS实现五子棋游戏
2020/05/28 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
[01:08:33]OG vs VGJ.T 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[00:57]英雄,你的补给到了!
2020/11/13 DOTA
pip 错误unused-command-line-argument-hard-error-in-future解决办法
2014/06/01 Python
python中字典(Dictionary)用法实例详解
2015/05/30 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
Pytorch修改ResNet模型全连接层进行直接训练实例
2019/09/10 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
Anconda环境下Vscode安装Python的方法详解
2020/03/29 Python
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
Elemental Herbology官网:英国美容品牌
2019/04/27 全球购物
办理居住证介绍信
2014/01/15 职场文书
学生操行评语大全
2014/04/24 职场文书
通知怎么写?
2019/04/17 职场文书
Python matplotlib绘制雷达图
2022/04/13 Python