Vue.js学习笔记——2.v-bind指令的使用

最新推荐文章于 2024-07-05 11:27:33 发布

土拨鼠的忧伤丶

最新推荐文章于 2024-07-05 11:27:33 发布

阅读量838

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue.js学习笔记文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/DDDDDecade/article/details/109830072

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

17 篇文章

订阅专栏

本文详细介绍了Vue.js框架中v-bind指令的使用方法，包括基本使用、动态绑定class和style等内容。通过实例展示了如何利用v-bind实现属性的动态绑定。

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

v-bind指令的使用

一、v-bind介绍

除了内容需要动态决定之外，某些时候我们也希望动态绑定一些属性如：动态绑定a元素的herf属性；动态绑定img元素的src属性；
此时就可以使用v-bind指令：
作用：动态绑定属性
缩写：：
语法：atrr为元素属性

<element v-bind:atrr=“”></element>
<element :atrr=“”></element>

二、v-bind的基本使用

举例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <!-- 使用v-bind动态绑定src属性 -->
  <img v-bind:src="imgURL" alt="">
  <!-- 语法糖简写形式 -->
  <a :href="aHerf">Vue.js</a>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"你好啊",
      imgURL:"https://cn.vuejs.org/images/logo.png",
      aHerf:"https://cn.vuejs.org/"
    }
  })
</script>

</body>
</html>

执行结果：
v-bind基本使用
可以看见通过v-bind绑定的属性的取值会直接往data里找，data中的数据通常是服务器返回的结果，通过data的中转而达成动态绑定的效果

三、 v-bind动态绑定class

v-bind动态绑定class有两种方式：

对象语法
数组语法

1.对象语法

用法一：直接通过{}绑定一个类，key是要绑定的类名，value是布尔值，value可以是来自data的属性值

<element :class="{key:value}">hellow world</element>

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

<element :class="{key1:value1，key2:value2}">hellow world</element>

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

<element class="类名" :class="{key1:value1，key2:value2}">hellow world</element>

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

<element class="类名" :class="classes">hellow world</element>

举例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    .active{
      color: red;
    }
    .line{
      background-color: black;
    }
  </style>
</head>
<body>

<div id="app">
  <!-- 一般添加class属性的方法 -->
  <h2 class="active">{{message}}</h2>
  <!-- 通过v-bind动态绑定 -->
  <h2 v-bind:class="Active">{{message}}</h2>
  <!-- 通过v-bind动态绑定，并传入一个对象 -->
  <h2 v-bind:class="{active:isActive}">{{message}}</h2>
  <!-- 通过v-bind动态绑定，并传入一个有多个值的对象 -->
  <h2 v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>
  <!-- 通过v-bind动态绑定，并传入一个方法 -->
  <h2 v-bind:class="getClasses()">{{message}}</h2>
  <!-- 通过v-bind动态绑定，并传入一个计算属性 -->
  <h2 v-bind:class="Classes">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"你好啊",
      Active:"active",
      isActive:true,
      isLine:true
    },
    computed:{
      Classes:function () {
        return {active:this.isActive,line:this.isLine}
      }
    },
    methods:{
      getClasses:function () {
        return {active:this.isActive,line:this.isLine}
      }
    }
  })
</script>

</body>
</html>

执行结果：
v-bind对象语法

2.数组语法

用法一：直接通过[]绑定一个数组

<element :class="['类名']">hellow world</element>

用法二：也可传入多个值

<element :class="['类名1'，'类名2']">hellow world</element>

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

<element class="类名3" :class="['类名1'，'类名2']">hellow world</element>

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

<element class="类名3" :class="classes">hellow world</element>

举例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style type="text/css">
    .active{
      color: red;
    }
    .line{
      background-color: black;
    }
  </style>

</head>
<body>

<div id="app">
  <!-- 通过v-bind动态绑定，并传入一个数组 -->
  <h2 v-bind:class="['active']">{{message}}</h2>
  <!-- 通过v-bind动态绑定，并传入一个有多个值的数组 -->
  <h2 v-bind:class="['active','line']">{{message}}</h2>
  <!-- 通过v-bind动态绑定，并传入一个方法 -->
  <h2 v-bind:class="getClasses()">{{message}}</h2>
  <!-- 通过v-bind动态绑定，并传入一个计算属性 -->
  <h2 v-bind:class="Classes">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"你好啊",
      Active:"active",
      Line:"line"
    },
    computed:{
      Classes:function () {
        return [this.Active,this.Line]
      }
    },
    methods:{
      getClasses:function () {
        return [this.Active,this.Line]
      }
    }
  })
</script>

</body>
</html>

执行结果：
v-bind数组语法
注意：数组中的类名要加单引号’active’使之成为字符串，不然就会解析成data中的属性

四、v-bind动态绑定style

我们可以使用v-bind：style来绑定一些CSS样式
在写CSS属性名时，如font-size可以使用驼峰式fontSize或短横线分隔’font-size’
绑定style有两种方式：

对象语法
数组语法

1.对象语法

绑定方式一：对象语法
style后面跟一个对象，key是CSS属性名，value是具体赋的值，值可以来自与data中的属性

<element :sytle="{key1:value1，key2:value2}"></element>

2.数组语法

绑定方式二：数组语法
style后面跟一个数组，多个值以逗号分隔,数组中的内容是来自data的对象属性

<element :sytle="[style1，style2]"></element>

举例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <!--对象语法-->
  <h2 :style="{fontSize:'50px'}">{{message}}</h2>
  <!-- value不加单引号就会解析成data中的属性 -->
  <h2 :style="{fontSize:size}">{{message}}</h2>
  <!--也可以使用字符串的拼接-->
  <h2 :style="{fontSize:finalSize+'px'}">{{message}}</h2>
  <!--数组语法-->
  <h2 :style="[baseStyle1,baseStyle2]">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"你好啊",
      size:'80px',
      finalSize:80,
      baseStyle1:{color:'red'},
      baseStyle2:{backgroundColor:'black'},
    }
  })
</script>

</body>
</html>