Vue之动态绑定属性

最新推荐文章于 2024-07-24 17:32:04 发布

U_yong

最新推荐文章于 2024-07-24 17:32:04 发布

阅读量1.2k

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_44756582/article/details/106530350

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

动态绑定属性

个人博客

https://www.boycharse.top

Vue系列

上一篇：02-Vue的插值操作
下一篇：04-v-on的使用

Vue动态绑定属性

动态绑定

首先，我们来看看我们平时给一个a标签添加一个href属性是怎么做的。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a href="https://www.boycharse.top">Yong's blog</a>
  </body>
</html>

没错，很简单，我们直接在a标签里写下href属性就可以了，结果如下：
在这里插入图片描述
那么如果这个链接(https://www.boycharse.top)不是固定的呢，它有可能是从服务器上获取的数据，那这时候我们就要通过js的dom操作给a标签添加href属性了。代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <a id="test">Yong's blog</a>
  </body>
  <script>
    // 假设这是从服务器获取的数据
    let url = "https://www.boycharse.top";
    let a = document.getElementById("test");
    a.href = url;
  </script>
</html>

结果如下：
在这里插入图片描述
我们可以通过js代码来给html标签动态绑定属性，下面将介绍用vue进行动态绑定属性。

v-bind的使用

我们可以使用v-bind来动态绑定属性。还是刚刚的那个例子，现在我们用vue来改写。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <a v-bind:href="url">Yong's blog</a>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        url: "https://www.boycharse.top",
      },
    });
  </script>
</html>

我们使用了v-bind:href=“url”，将vue中的url绑定到了a标签的href属性上。

下面在举一个例子：绑定img的src属性，代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <a v-bind:href="url">Yong's blog</a>
      <img v-bind:src="img" alt="" />
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        url: "https://www.boycharse.top",
        img: "https://www.boycharse.top/princess.jpg",
      },
    });
  </script>
</html>

结果如下：
在这里插入图片描述

v-bind较为特殊的用法

下面介绍v-bind一些较为特殊的用法

绑定class属性

绑定class属性，我们可以通过像上面绑定href属性和src属性一样的方法给一个html标签绑定class属性，如：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1 v-bind:class="className">{{message}}</h1>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "你好",
        className: "test",
      },
      methods: {},
    });
  </script>
</html>

结果如下：
在这里插入图片描述
除此之外，我可以通过绑定对象和数组的方法绑定class。

绑定对象的方法

我可以直接向v-bind:class中写入一个对象，如：

<h1 v-bind:class="{active:true,fly:true}">{{message}}</h1>

这里v-bind:class中的值是一个对象，它们的属性都是布尔值，当值为true时，这个属性的属性名会被当作这个标签的class属性，如上，因为active和fly都是true，所以该标签的class属性是class=“active fly”，如图：
在这里插入图片描述
如果我们将active改为false，结果如下：

如果对象长度比较长，直接写在v-bind:class中可能显得很丑，不易阅读代码，我可以在methods中定义一个方法，然后返回这个对象。如下：

然后再v-bind:class处调用该方法即可：

<h1 v-bind:class="getClass()">{{message}}</h1>

运行结果如下：
在这里插入图片描述
完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1 v-bind:class="getClass()">{{message}}</h1>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "你好",
      },
      methods: {
        getClass: function () {
          return {
            active: true,
            fly: false,
          };
        },
      },
    });
  </script>
</html>

绑定数组

我们也可以给v-bind:class绑定一个数组，如下：

<h1 v-bind:class="['active','fly']">{{message}}</h1>

结果如下：
在这里插入图片描述
数组中的两个字符串都被绑定成了class的属性。
这里要注意，我们加了单引号’active’，加上单引号就是字符串，不加就是个变量了，我们尝试删掉单引号，如：

<h1 v-bind:class="[active,'fly']">{{message}}</h1>

然后就报错了，报错信息如下：
在这里插入图片描述
因为我们去掉了单引号，所以Vue将active当作了变量，去寻找app对象中的active变量，但实际上我们并没有定义它。我们可以进行如下修改：

  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "你好",
        active: "hhh",
      },
      methods: {
        getClass: function () {
          return {
            active: true,
            fly: false,
          };
        },
      },
    });
  </script>

我们在data中添加了active变量，并赋值为“hhh”，运行结果如下：
在这里插入图片描述

绑定style

我们可以通过传入一个对象，来绑定style

<h2 v-bind:style="{color:'red'}">{{message}}</h2>

运行结果如下：
在这里插入图片描述
这里要注意这个red，如果不加引号，依旧会被当成一个变量，与上面绑定class类似，这里不再累述。

小练

编写一个界面，其中有一个一段文本，以及一个按钮，点击按钮可以将文字进行红色和黄色的切换，如图
在这里插入图片描述

我们先编写两个样式：

    <style>
      .red {
        color: red;
      }
      .yellow {
        color: yellow;
      }
    </style>

当文字要变成黄色时，我们将它的class设置为yellow，变成红色时，我们将它class设置为red。
接着，我们编写div里的内容：

    <div id="app">
      <div v-bind:class="{red:isRed,yellow:isYellow}">{{message}}</div>
      <button v-on:click="toggle">切换颜色</button>
    </div>

这里我们通过控制isRed和isYellow的值来控制class属性。
完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .red {
        color: red;
      }
      .yellow {
        color: yellow;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div v-bind:class="{red:isRed,yellow:isYellow}">{{message}}</div>
      <button v-on:click="toggle">切换颜色</button>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "你好",
        isRed: true,
        isYellow: false,
      },
      methods: {
        toggle: function () {
          this.isRed = !this.isRed;
          this.isYellow = !this.isYellow;
        },
      },
    });
  </script>
</html>

U_yong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue之动态绑定属性

动态绑定属性个人博客https://www.boycharse.topVue系列上一篇：02-Vue的插值操作下一篇：暂未更新Vue动态绑定属性动态绑定首先，我们来看看我们平时给一个a标签添加一个href属性是怎么做的。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="widt
复制链接

扫一扫

专栏目录