Vue学习总结（六）——v-bind指令

最新推荐文章于 2024-05-23 07:33:10 发布

田小江爱分享

最新推荐文章于 2024-05-23 07:33:10 发布

阅读量306

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue学习笔记

本文链接：https://blog.youkuaiyun.com/third_/article/details/111083774

Vue学习笔记专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了Vue中的v-bind指令，包括动态绑定属性、class和style。讲解了对象语法和数组语法的应用，如何根据条件动态添加或切换class和style。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、v-bind介绍

（1）使用场景

除了内容需要动态决定外，某些属性我们也希望动态来绑定。

a、比如动态绑定a元素的href属性

b、比如动态绑定img元素的src属性

（2）作用：动态绑定属性

（3）缩写：:

（4）预期：any（with argument)|Object(without argument)

（5）参数：attrOrProp（optional）

（6）v-bind 有一个对应的语法糖，也就是简写方式，在开发中，我们通常会使用语法糖的形式，因为这样更加简洁。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <!--错误的做法，这里不可以使用mustache语法-->
    <!--<img src="{{imgURL}}">-->
    <!--正确的做法：使用v-bind指令-->
    <img v-bind:src="imgURL">
    <!--对应的语法糖，也就是简写方式-->
    <a :href="url">百度一下</a>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        imgURL: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/1200px-Vue.js_Logo_2.svg.png',
        url: 'https://baidu.com'
      }
    })
  </script>
</body>
</html>

二、v-bind动态绑定class

1、对象语法

（1）对象语法的含义是 :class后面跟的是一个对象。

（2）对象语法有下面这些用法：

用法一：直接通过{}绑定一个类

<h2 :class="{active: isActive}">{{message}}</h2>

用法二：也可以通过判断，传入多个值

<h2 :class="{active: isActive, line: isLine}">{{message}}</h2>

用法三：和普通的类同时存在，并不冲突

和基础的class同时存在时，class会将里面的值进行合并，如果isActive和isLine都为true，那么会有title isActive isLine三个类

<h2 class="title" :class="{active: isActive, line: isLine}">{{message}}</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中，classes是一个计算属性

<h2 class="title" :class="classes">{{message}}</h2>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active {
      color: red;
    }
  </style>
</head>
<body>
  <div id="app">
    <!--对象语法指的是，我们后面跟的是一个对象，对象里面有键有值-->
    <!--用法一：直接通过{}绑定一个类-->
    <h2 :class="{active: isActive}">{{message}}</h2>
    <!--用法二：也可以通过判断，传入多个值-->
    <h2 :class="{active: isActive, line: isLine}">{{message}}</h2>
    <!--用法三：和普通的类同时存在，并不冲突-->
    <!--和基础的class同时存在时，class会将里面的值进行合并，如果isActive和isLine都为true，那么会有title isActive isLine三个类-->
    <h2 class="title" :class="{active: isActive, line: isLine}">{{message}}</h2>
    <!--用法四：如果过于复杂，可以放在一个methods或者computed中-->
    <!--放到methods中-->
    <h2 class="title" :class="getClasses()">{{message}}</h2>
    <!--classes是一个计算属性-->
    <h2 class="title" :class="classes">{{message}}</h2>
    <!--v-on是指令事件绑定机制-->
    <button v-on:click="buttonClick">点击变色</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好呀',
        isActive: true,
        isLine: true
      },
      methods: {
        buttonClick: function() {
          this.isActive = !this.isActive
        },
        getClasses: function() {
          return {active: this.isActive, line: this.isLine}
        }
      }
    })
  </script>
</body>
</html>

2、数组语法

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .active {
      color: red;
    }
  </style>
</head>
<body>
  <div id="app">
    <!--数组语法指的是，我们后面跟的是一个数组-->
    <!--加单引号表示数组里面是一个字符串-->
    <h2 class="title" :class="['active', 'line']">{{message}}</h2>
    <!--不加单引号表示数组里面是一个对象-->
    <h2 class="title" :class="[active, line]">{{message}}</h2>
    <!--也可以放在一个methods中-->
    <h2 class="title" :class="getClasses()">{{message}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好呀',
        active: 'aaaa',
        line: 'bbbb'
      },
      methods: {
        getClasses: function() {
          return [this.active, this.line]
        }
      }
    })
  </script>
</body>
</html>

执行结果如下：

三、v-bind动态绑定style

1、对象语法

:style="{'font-size': finalSize + 'px', background: finalColor

style后面跟的是一个对象类型

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <!-- <h2 :style="{key(属性名):value(属性值)}">{{message}}</h2> -->
    <!--100px必须要加一个单引号，否则会认为是变量去解析-->
    <h2 :style="{'font-size':'100px'}">{{message}}</h2>
    <!--finalSize当成一个变量去使用-->
    <h2 :style="{'font-size': finalSize + 'px'}">{{message}}</h2>
    <!--可以有多个对象-->
    <h2 :style="{'font-size': finalSize + 'px', background: finalColor}">{{message}}</h2>
    <!--可以直接用一个方法-->
    <h2 :style="getStyles()">{{message}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊',
        finalSize: 100,
        finalColor: 'red'
      },
      methods: {
        getStyles: function () {
          return {'font-size': this.finalSize + 'px', background: this.finalColor}
        }
      }
    })
  </script>
</body>
</html>

2、数组语法

<h2 :style="[colorBaseStyle, sizeBaseStyle]">{{message}}</h2>

style后面跟的是一个对象类型

多个值以,分割即可

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <h2 :style="[colorBaseStyle, sizeBaseStyle]">{{message}}</h2>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊',
        colorBaseStyle: { background: 'red' },
        sizeBaseStyle: { 'font-size': '100px' }
      }
    })
  </script>
</body>
</html>