Vue学习笔记之动态绑定属性_vue 动态属性-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45525630/article/details/121801078

秋招过后，意识到自己的不足，最近又重新复习了一下codewhy老师的Vue，今天跟大家分享一下Vue动态绑定属性的知识

文章目录

一、v-bind的基本使用
- 示例:
二、v-bind动态绑定属性class（对象语法）
- 示例:
三、v-bind动态绑定属性class（数组语法）
- 示例:
四、v-bind动态绑定style（对象语法）
- 示例:
五、v-bind动态绑定style(数组语法)
- 示例:
总结

一、v-bind的基本使用

v-bind最常见的用法就是我们来绑定一个属性比如图片属性

示例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      #app img {
        width: 200px;
        height: 200px;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <img v-bind:src="imgURL" alt="图片失效" title="Vue图片" />
    </div>
    <script src="../js/vue.js"></script>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          imgURL: 'https://cn.vuejs.org/images/logo.svg',
        },
        methods: {},
      })
    </script>
  </body>
</html>

在这里插入图片描述

这样我们就完成了data里面属性绑定到img标签上的操作

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

在开发的时候我们有时候希望动态地来切换class，这时候我们就会用到v-bind动态绑定class属性的对象语法。

示例:

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

  <body>
    <div id="app">
      <h3 v-bind:class="getClasses()">{{message}}</h3>
      <button v-on:click="RedClick">按钮</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue',
          red: 'red',
          isRed: true,
        },
        methods: {
          // 颜色切换
          RedClick: function () {
            this.isRed = !this.isRed
          },
          getClasses: function () {
            return { red: this.isRed }
          },
        },
      })
    </script>
  </body>
</html>

在这里插入图片描述

这里我们通过按钮点击来切换message的颜色，那么我们要绑定的class有时候可能会有很多个属性，所以我们可以将它写成一个方法，然后给按钮添加一个点击事件来切换class

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

v-bind动态绑定属性还有一种数组语法

示例:

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

  <body>
    <div id="app">
      <h3 v-bind:class="[active,box]">{{message}}</h3>
      <h3 v-bind:class="getClasses()">{{message}}</h3>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue',
          active: 'active',
          box: 'box',
        },
        methods: {
          getClasses: function () {
            return [this.active, this.box]
          },
        },
      })
    </script>
  </body>
</html>

在这里插入图片描述

我们在开发者工具里可以看到是有绑定上去的，同时也可以写成一个方法来返回

四、v-bind动态绑定style（对象语法）

v-bind还能动态绑定style，这里介绍它的对象语法

示例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <!-- 这里加引号就会当成字符串来解析，如果没加就会当成变量来解析 -->
      <h2 :style="{fontSize:'100px'}">{{message}}</h2>
      <!-- 这里可以发现这种写法也是成立的，此时Vue把finalSize当成变量来解析去data里面找finalSize这个变量 -->
      <h2 :style="{fontSize:finalSize}">{{message}}</h2>
      <!-- 这里如果变量只是简单的数字那么就需要用这种拼接的方法 -->
      <h2 :style="{fontSize:firstSize + 'px',color:'red'}">{{message}}</h2>
      <!-- 如果嫌这个写法太长的话可以写成一个方法返回 -->
      <h2 :style="getStyles()">{{message}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue',
          finalSize: '100px',
          firstSize: 100,
        },
        methods: {
          getStyles() {
            // 当然这里要加this，因为是去data里面拿这个数据
            return { fontSize: this.firstSize + 'px', color: 'red' }
          },
        },
      })
    </script>
  </body>
</html>

在这里插入图片描述

可以看到几种方法最后都能渲染出来

五、v-bind动态绑定style(数组语法)

v-bind动态绑定style还有一个数组语法

示例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <h2 :style="[baseStyles,overStyles]">{{message}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          message: 'v-bind绑定style数组语法',
          baseStyles: { backgroundColor: 'pink' },
          overStyles: { fontSize: '50px' },
        },
        methods: {},
      })
    </script>
  </body>
</html>