• Vue 中指令v-bind的补充、v-for的使用，两者的结合使用。

    目录

    前言：

    一、 v-bind动态绑定class

    1. v-bind动态绑定class(对象语法)

    2. v-bind动态绑定class(数组用法)

    3.v-bind动态绑定style(对象语法)

    4.v-bind动态绑定style(数组语法)

    二、v-bind和v-for的结合使用

    前言：

    在昨天的文章中已经基本介绍了，v-bind的基本使用，可以参考学习，本文是更加具体的解释v-bind的使用，和v-for结合的使用。

    一、 v-bind动态绑定class

    1. v-bind动态绑定class(对象语法)

    这里举简单例子来体现绑定效果，设置一个按钮可以控制对象里面元素的颜色，这时候对象就要绑定动态事件，才能实现变化。

    有两种绑定的方法

    一种直接在h5中直接绑定颜色变化，另一种是调用函数的方式绑定，需要注意，直接写就不需要this，但是在调用函数里面需要使用this才能实现。其中还要注意，变色的条件是自己设置了一个为false点击后取反出现，然后再取反，就会出现变色不变色的样式。

    代码如下:

    1.   <style>
    2.     .active{
    3.       color:red;
    4.     }
    5.   style>
    6. head>
    7. <body>
    8.   <div id="app">
    9.     <h2 class="title" :class="{active:isActive}">{{message}}h2>
    10.     <h2 class="title" :class="getClasses()">{{message}}h2>
    11.     <button @click="change">点击变色button>
    12.  
    13.   div>
    14.   <script src="vue.js">script>
    15.   <script>
    16.     const app = new Vue({
    17.       el:"#app",
    18.       data:{
    19.         message:"你好啊",
    20.         active:"active",
    21.         isActive:false
    22.       },
    23.       methods: {
    24.         change(){
    25.           this.isActive = !this.isActive
    26.         },
    27.         getClasses(){
    28.           return {active:this.isActive}
    29.         }
    30.       },
    31.     })
    32.   script>

    2. v-bind动态绑定class(数组用法)

    class属性中可以放数组，会依次解析成对应的class。

    1. ​ 加上单引号的表示字符串

    2. ​ 不加的会当成变量

    3. ​ 可以直接使用方法返回数组对象

    1.  <div id="app">
    2.     
    3.     <h2 class="title" :class="['active','line']">{{message}}h2>
    4.     
    5.     <h2 class="title" :class="[active,line]">{{message}}h2>
    6.     <h2 class="title" :class="getClasses()">{{message} {{getClasses()[1]}}h2>
    7.  
    8.   div>
    9.   <script src="vue.js">script>
    10.   <script>
    11.     const app = new Vue({
    12.       el:"#app",
    13.       data:{
    14.         message:"你好啊",
    15.         active:"aaaa",
    16.         line:'bbbb'
    17.       },
    18.       methods: {
    19.  
    20.         getClasses(){
    21.           return [this.active,this.line]
    22.         }
    23.       },
    24.     })
    25.   script>

    3.v-bind动态绑定style(对象语法)

    3. <h2 :style="{fontSize:'50px'}">{{message}}h2>
    5. <h2 :style="{fontSize:fontSize}">{{message}}h2>
    6. <h2 :style="getClasses()">{{message}}h2>
    7.  
    8.   div>
    9.   <script src="vue.js">script>
    10.   <script>
    11.     const app = new Vue({
    12.       el:"#app",
    13.       data(){
    14.        return{ message:"你好啊",
    15.         fontSize:50+'px'
    16.      }  
    17.     },
    18.       methods: {
    19.         getClasses(){
    20.          return {fontSize:this.fontSize}
    21.         }
    22.       
    23.       },
    24.     })
    25.   script>

    4.v-bind动态绑定style(数组语法)

    1.   <div id="app">
    2.     <h2 :style="[baseStyle]">{{message}}h2>
    3.     <h2 :style="getStyle()">{{message}}h2>
    4.   div>
    5.   <script src="vue.js">script>
    6.   <script>
    7.     const app = new Vue({
    8.       el:"#app",
    9.       data:{
    10.         message:"你好啊",
    11.         baseStyle:{backgroundColor:'red'}
    12.       },
    13.       methods: {
    14.         getStyle(){
    15.           return [this.baseStyle]
    16.         }
    17.       },
    18.     })
    19.   script>

    二、v-bind和v-for的结合使用

    实现了，点击字体会出现变色，前提是需要先通过v-for把数组内的内容全部都遍历出来，在通过绑定事件，来实现颜色的切换，其中需要注意，自己设置了一个当前的索引，通这个索引来判断当前的情况，从而发生颜色的变化，实现所需的结果。

    1. <style>
    2.         .active{
    3.             color: red;
    4.         }
    5.     style>
    6. head>
    7. <body>
    8.     <div id="app">
    9.         <ul>
    10.             <li :class="currentIndex==index?'active':''" @click="change(index)" v-for="(item,index) in list">{{index}}--{{item}}li>
    11.         ul>
    12.     div>
    13.     <script src="./vue.js">script>
    14.     <script>
    15.         let vm = new Vue({
    16.             el:'#app',
    17.             data(){
    18.                 return {
    19.                     currentIndex:0,
    20.                     list:["小明","小红","小张","小李"],
    21.                 }
    22.             },
    23.             methods:{
    24.                 change(index){
    25.                     this.currentIndex=index
    26.                 }
    27.             }
    28.         })
    29.     script>

  • 相关阅读:
    PAT甲级：1055 The World‘s Richest ｜Python
    二叉树练习
    机器学习数据集读取和预处理
    基础知识与问题
    系统与进程
    电脑重装系统打印机脱机状态怎么恢复正常
    Top 15 开源3D分子蛋白质建模与渲染软件
    Qt优秀开源项目之九：qTox
    基于三维Voronoi图划分的加权混合回归定位算法
    CopyOnWriteArrayList源码分析
  • 原文地址：https://blog.csdn.net/yzq0820/article/details/126001090