v-bind、v-for和v-bind的结合改变class应用

最新推荐文章于 2022-07-26 20:29:32 发布

Doe

最新推荐文章于 2022-07-26 20:29:32 发布

阅读量694

点赞数

分类专栏： # Vue 文章标签： v-bind v-for和v-bind 动态绑定style vue.js

本文链接：https://blog.csdn.net/weixin_43613849/article/details/117396307

版权

Vue 专栏收录该内容

48 篇文章 3 订阅

订阅专栏

1、v-bind

1、基本使用

2、v-bind动态绑定属性class（对象语法）

3、v-bind动态绑定属性class（数组语法）

4、bind动态绑定style（对象语法）

5、bind动态绑定style（数组语法）

2、v-for和v-bind的结合使用（例子）

1、v-bind

1、基本使用

在开发的时候，有时候我们的属性不是写死的，有可能是根据我们的一些数据动态地决定的，比如图片标签（<img>）的src属性，我们可能从后端请求了一个包含图片地址的数组，需要将地址动态的绑定到src上面，这时就不能简单的将src写死。还有一个例子就是a标签的href属性。这时可以使用v-bind指令：

　　作用：动态绑定属性；
　　缩写（语法糖）：: (只用一个冒号代替)；

v-bind有一个对应的语法糖，也就是简写方式在开发中，我们通常会使用语法糖的形式，因为这样更加简洁。简写方式如下：
    <img v-bind:src="imgUri" alt="" srcset="">

    
    <img :src="imgUri" alt="" srcset="">
　　预期：

　　　　（1）any (with argument)，任意参数；

　　　　（2）Object (without argument)，对象。

　　参数：attrOrProp (optional)

  <div id="app">
    <img v-bind:src="imgUri" alt="" srcset="">
    <!--    语法糖v-bind:和：    -->
    <img :src="imgUri" alt="" srcset="">
    <a v-bind:href="aHref">百度一下</a>
    <a :href="aHref">百度一下</a>

  </div>

  <script src="../js/vue.js"></script>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'hello',
        imgUri: 'https://img-blog.csdnimg.cn/20210529171331832.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYxMzg0OQ==,size_16,color_FFFFFF,t_70',
        aHref: 'https://www.baidu.com/'
      }
    })
  </script>

服务器请求过来的数据，我们一般都会在data那里做一下中转，做完中转过后再把需要的变量绑定到对应的属性上面。

2、v-bind动态绑定属性class（对象语法）

　　v-bind除了在开发中用在有特殊意义的属性外（src, href等），也可以绑定其他一些属性，如class。

    <!-- <h2 v-bind:class="{key1:value1,key2:value2,key3:value3}"></h2> -->
    <!-- <h2 v-bind:class="{类名1:true,类名2:boolean,类名3:boolean}"></h2> -->
    <h2 v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>

对象语法有下面这些用法：

用法一：直接通过{}绑定一个类
<h2 :class="{'active': isActive}">Hello World</h2>

用法二：也可以通过判断，传入多个值
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法三：和普通的类同时存在，并不冲突
注：如果isActive和isLine都为true，那么会有title/active/line三个类
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

例子：

    <div id="app">
        <h2 class="active" v-cloak>{{message}}</h2>
        <h2 :class="active" v-cloak>{{message}}</h2>

        <!-- <h2 v-bind:class="{key1:value1,key2:value2,key3:value3}"></h2> -->
        <!-- <h2 v-bind:class="{类名1:true,类名2:boolean,类名3:boolean}"></h2> -->
        <h2 v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>
        <h2 v-bind:class="getClasses()">{{message}}</h2>
        <button v-on:click="changeColor">Change Color</button>
  </div>

  <script src="../js/vue.js"></script>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'hello',
        active: 'active',
        isActive: true,
        isLine: true
      },
      methods: {
        changeColor: function () {
          this.isActive = !this.isActive
        },
        getClasses: function () {
          return { active: this.isActive, line: this.isLine }
        }
      }
    })
  </script>

3、v-bind动态绑定属性class（数组语法）

数组语法的含义是:class后面跟的是一个数组

  <div id="app">
    <h2 class='title' :class="['active','line']"></h2>
    <h2 class='title' :class="getClasses()"></h2>

  </div>

  <script src="../js/vue.js"></script>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: 'hello',
        active: 'aaaaa',
        line: 'bbbbb'
      },
      methods: {
        getClasses: function () {
          return ['active', 'line'];
        }
      }
    })
  </script>

4、bind动态绑定style（对象语法）

:style="{color: currentColor, fontSize: fontSize + 'px'}"
style后面跟的是一个对象类型

对象的key是CSS属性名称
对象的value是具体赋的值，值可以来自于data中的属性

5、bind动态绑定style（数组语法）

<div v-bind:style="[baseStyle1,baseStyle2]"></div>
style后面跟的是一个数组类型多个值以，分割即可

<body>
    <div id="app" :style="[baseStyle1,baseStyle2]">
        {{message}}
    </div>
</body>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: 'Hello World!',
            baseStyle1: {
                backgroundColor: 'red'
            },
            baseStyle2: {
                color: 'green'
            }
        }
    })
</script>

2、v-for和v-bind的结合使用（例子）

题目：要求点击某个li，这个li的字体变为红色

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  .active {
    color: red;
  }
</style>

<body>
  <div id="app">
    <ul>
      <li v-for="(m,index) in movies" v-on:click="getClasses(index)" :class="{active : currentIndex === index}">
        {{m+index}}</li>
    </ul>
  </div>

  <script src="../js/vue.js"></script>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        movies: ['海贼王', '火影忍者', '妖精的尾巴', '快乐星球'],
        currentIndex: -1
      },
      methods: {
        getClasses(index) {
          console.log(index)
          this.currentIndex = index
        }
      }
    })
  </script>
</body>
</html>