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

需求：

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

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

代码实现：

<!-- 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;
  }
 }

 });

图示

点击后

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实现列表颜色切换就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解VueJs中的V-bind指令

    引子 v-bind  主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a>   一.概述 v-bind  主要用于属性绑定,比方你的class属性,style属性,value属性,href属性等等,只要是属性,就可以用v-bind指令进行绑

  • 在vue中v-bind使用三目运算符绑定class的实例

    如图所示: 通过动态的切换isOk就可以达到切换class的效果,isOk可以为一个表达式如num>1,如果data中num大于1,则显示classA,否则显示classB 以上这篇在vue中v-bind使用三目运算符绑定class的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 详解vue中v-bind:style效果的自定义指令

    自定义指令 1.什么是自定义指令 以 v- 为前缀,然后加上自己定义好的名字组成的一个指令就是自定义指令.为什么要有自定义指令呢?在有些时候,你仍然需要对普通的DOM元素进行底层的操作,这个时候就可以用到自定义指令. 2.自定义指令的语法 全局自定义指令 // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时-- inserted: function (el) { // 聚焦元素 el.focus() } })

  • 一文读懂vue动态属性数据绑定（v-bind指令）

    v-bind的基本用法 一.本节说明 前面的章节我们学习了如何向页面html标签进行插值操作,那么如果我们想动态改变html标签的属性,该怎么办呢? 这就是我们这节开始要讲的内容v-bind. 二. 怎么做 ":"为v-bind的简写形式,也可称为语法糖 三. 效果 四. 深入 在上图中将a标签的href属性值设置为toutiao,VUE实例将自动去data里面寻找toutiao属性进行值绑定. 不只是a标签,所有的html标签属性都可以通过v-bind进行值绑定,然后通过改变数据动态

  • vue学习笔记之指令v-text && v-html && v-bind详解

    vue学习笔记之指令v-text && v-html && v-bind详解

    一 : 指令的概念: 指令是vue自定义的以v-开头的自定义属性.每个不同的属性都有各自不同的意义和功能 二 : 指令的语法: v-指令名 = "表达式判断或者是业务模型中属性名或者事件名" 三 : 具体指令 1. v-text 作用 : 操作元素中的纯文本 快捷方式 : {{}} 栗子1 简写形式:将v-text=""换成{{}} <div id="app"> {{ message }} </div> var app =

  • 详细分析vue表单数据的绑定

    v-model的基本用法 一.本节说明 前面的章节我们学习了v-bind指定,可以通过模型数据去影响视图.我们都知道VUE是支持双向数据绑定的,那么视图是如何影响数据的呢?那就要学到我们这一节的内容v-model.v-model可以将表单输入绑定到对应的模型数据. 二. 怎么做 我们通过v-model实现一个简单的需求 通过表单input绑定模型数据message,表单数据变化data.message也发生变化 然后通过Mustache表达式,将变化之后的message数据显示到视图页面上 三.

  • 对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解

    最近学了点vuejs,把学的东西记录下来方便你我他. vuejs的官方文档:https://vuejs.org/v2/api/ (还是要习惯看官方文档啊同志们~) 1. v-for进行遍历 比如我这里想遍历videos里的所有元素,那么我输入 <div v-for="v in videos"> <a :href="v" rel="external nofollow" >啦啦啦</a> </div>

  • Vue条件循环判断+计算属性+绑定样式v-bind的实例

    Vue.js条件与循环 1.条件判断 (1)v-if, <div id="app"> <p v-if="seen">现在你看到我了</p> <template v-if="ok"> <h1>菜鸟教程</h1> </template> </div> <script> new Vue({ el:'#app', data:{ seen:true,

  • vue.js学习笔记之v-bind和v-on解析

    v-bind 指令用于响应地更新 HTML 特性 形式如:v-bind:href    缩写为    :href; v-on 指令用于监听DOM事件 形式如:v-on:click  缩写为 @click; <body> <div id="test"> <img v-bind:src="src"> <a v-bind:href="url" rel="external nofollow"

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

    需求: 在页面上显示四个列表,初始时字体为黑色. 鼠标点击某一个列表时,该列表的颜色变为红色,其余列表仍为黑色. 代码实现: <!-- css --> <style> .red{ color: red; } </style> <!-- html --> <div id="app"> <ul> <li v-for="item,index in movies" :class="{re

  • 利用Vue实现移动端图片轮播组件的方法实例

    前言 轮播图的插件也有很多,用jQuery写起来也不难,这里分享的是关于利用Vue实现移动端图片轮播组件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: wc-swiper 基于 Vue 的移动端的图片轮播组件. Why 之前一直在用 vue-awesome-swiper, 功能很齐全, 但是唯一的问题就是体积比较大. 我只是想要一个简单的图片轮播, 但是却要引入 100多k 大小的文件, 这样是不对的. 特点 支持自动播放 & 无限轮播 (loop) 效果 支持用户滑

  • 如何利用vue实现css过渡和动画

    如何利用vue实现css过渡和动画

    目录 一.过渡和动画的区别 二.使用Vue实现基础得css过渡与动画 1. 动画 2. 过渡 三.使用transition标签实现单元素/组件的过渡和动画效果 1. transition 的基本介绍 2. transition 的过渡class 3. 过渡示例 4. 动画示例 5. transition的name属性 6. 自定义过渡类名 7.同时设置过渡和动画 8. duration属性 9. 使用js实现动画 四.组件和元素切换动画的实现 五.列表动画 六.状态动画 总结 一.过渡和动画的区

  • 利用Vue.js实现checkbox的全选反选效果

    前言 这篇文章主要是跟大家分享了利用Vue.js实现checkbox的全选反选效果,之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.后来很感谢朋友留言帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. html示例代码 <template> <div> <input type='checkbox' class='input-checkbox' v-model='checked' v-on:click='checkedAll'

  • 利用Vue.js实现求职在线之职位查询功能

    利用Vue.js实现求职在线之职位查询功能

    前言 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 本文主要介绍的是关于利用Vue.js实现职位查询功能的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 知识点: v-on, v-for, v-if, props, $emit,动态Prop, Class 与 Style 绑定 P1 分页查询 查询参数 查询参数:

  • 利用vue.js实现被选中状态的改变方法

    在使用原型实现使不选中状态改变之后,接触到vue,就想着能不能使用vue再把功能实现一边,在上篇中的页面并没有动态实现页面,所有的数据也都是直接写在html中.而使用vue之后,已经能够实现页面根据数据的多少动态生成.而且代码量也大幅度减少. html部分的代码: <div data-role="page " class="page "> <div class="center " id="app"> &

  • 利用vue和element-ui设置表格内容分页的实例

    html代码 因为我写在template中,也就是新建了组建中,贴出代码. <el-pagination small layout="prev, pager, next" :total="total" @current-change="current_change"> </el-pagination> 代码中,small代表是否使用小型分页样式 layout代表组件布局,子组件名用逗号分隔 属性: total代表总条目数

  • 利用vue.js把静态json绑定bootstrap的table方法

    直接上代码 嘻嘻,发现bootstrap+vue.js拿来做原型效率挺高,以后就这样做原型 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="https://cdn.b

  • 利用Vue构造器创建Form组件的通用解决方法

    前言 在前端平常的业务中,无论是官网.展示页还是后台运营系统都离不开表单,它承载了大部分的数据采集工作.所以如何更好地实现它,是平常工作中的一个重要问题. 在应用Vue框架去开发业务时,会将页面上每个独立的可视/可交互区域拆分为一个组件,再通过多个组件的自由组合来组成新的页面.例如 <template> <header></header> ... <content></content> ... <footer></footer&

  • 如何利用vue实现波谱拟合详解

    主页面-功能介绍 小白初入职场第一篇总结,废话比较多,求轻喷~ 波谱拟合用来对某种材料或物质的谱图进行识别和分析,每种物质可以有多种成分,每种成分用component1.component2...表示,用Add another component和Remove component来控制每种成分的增加和删除,每种成分由多种原子核构成,即nuclei,用Add nucleus和Remove nucleus来控制每种成分内原子核数量,每新增一个原子核,波谱就会分裂一次,谱峰数量由(1->2->4-&

随机推荐