vue动态绑定属性，指令v-bind

最新推荐文章于 2025-03-21 14:57:26 发布

卡布达。

最新推荐文章于 2025-03-21 14:57:26 发布

阅读量1.4w

点赞数 9

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

本文链接：https://blog.youkuaiyun.com/qq_45700583/article/details/108968570

版权

学习手册同时被 2 个专栏收录

45 篇文章

订阅专栏

笔记

35 篇文章

订阅专栏

本文详细介绍了Vue.js中v-bind指令的使用，包括基本用法、动态绑定class属性（对象和数组语法）以及内联style属性（对象和数组语法）。通过实例讲解，加深对v-bind及结合v-for的小练习理解。

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

1. v-bind指令介绍

1.插值操作主要作用
    ：将Vue实例中的数据插入到我们模板的内容当中，并改变data可以动态改变显示。
      
2.动态绑定属性
    ：除了内容需要动态来决定外，元素的某些属性我们也希望动态来绑定。
      比如，动态绑定a元素的href属性、动态绑定img元素的src属性。
      
     Mustache双括号语法,只能在内容插值里使用，属性值是不可以用的
     <img src="{{imgURL}}">、<img src="imgURL">是错误的，
     vue不会解析将data值放里面去；会被当做字符，而不是变量；

 3.动态绑定属性则使用v-bind指令：
     作用：动态绑定属性
     缩写：：

     在前面加上v-bind后，就表明将该属性的属性值当成一个变量
     vue会对它解析，将解析到的变量 赋予data属性中对应的值。


 一般图片的img中src属性值都是不固定的，像轮播图等
  src属性值：可以是服务器端请求过来的
  服务器端请求过来的值放在vue实例的data中，然后将data中的属性赋给src属性值来使用
  则响应式：修改data中的属性也可以实时响应，动态变化；

2.v-bind的基本使用

1.动态绑定属性：用指令v-bind 动态的绑定a元素的href属性、动态的绑定img元素的src属性；

2.将服务器请求过来的数据放在vue实例的data中
   将data中对应数据给元素的属性使用，作为属性值，指令v-bind来完成。
   这样绑定后，修改vue实例的data中对应的属性也可以实时的响应到对应的元素。和{{ }}效果相同
   
  给img和a元素加v-bind指令后，就表明它的属性值是一个变量，就可以vue解析；

<div id="app">
  <img v-bind:src="imgURL" alt="" >
  <a v-bind:href="aHref">百度一下</a>
  <h2>{{message}}</h2>

  //v-bind指令的语法糖写法
  <img :src="imgURL" alt="" >
  <a :href="aHref">百度一下</a>
</div>

<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"你好啊",
      imgURL:"https://img.alicdn.com/tfs/TB1UGbOOuL2gK0jSZPhXXahvXXa-440-470.png_294x430q100.jpg_.webp",
      aHref:"http://www.baidu.com"
    //一般服务器请求过来的数据，是放在data中,
    //若修改这些数据，它还是可以实时响应动态绑定的属性，和{{}}的效果相同；
    }
  })
</script>

3.v-bind动态绑定class属性(对象语法)

1.v-bind动态绑定class
       ：用v-bind后，则class的值是一个变量，将变量可以放在data中动态绑定样式。

2.动态绑定class有两种方式：
     对象语法  （先看这一种）
     数组语法

3.动态绑定class属性的对象方法：
     用指令v-bind，  v-bind:class= "{key1：value1，key2：value2}"
     若对象内容value值为true，则该key样式起作用
     若对象内容value值为false，则该key样式不起作用

  value值放在data中作为变量，进行使用，当使用时让它为true，不使用时为false，
  这样就可以动态的修改属性class的值

4.绑定class的样式
     将value值放在data中作为变量，进行使用，当使用时让它为true，不使用时为false，
     这样就可以动态的修改属性class的值；

//样式
 <style>
    .active{
      color: red;
     }
 </style>

<div id="app">
  <h2 class="active">{{message}}</h2>
  //第一种：直接用style中的样式，写固定；
  
  <h2 v-bind:class="active">{{message}}</h2>
  //第二种：用指令v-bind,class的属性值则active为变量；
  //vue解析，变量对应data中active属性值，则用了active的样式；
  
  <h2 v-bind:class="{active:isActive, line:isLine}">{{message}}</h2>
  //第三种：用指令v-bind；后面接对象{key1：value1，key2：value2}
  //isActive为true则active样式起作用。
  //isActive为false则active样式不起作用。

  <button v-on:click="btn">按钮</button>
  //设置按钮，让点击按钮，颜色变化

  <h2 class="title" v-bind:class="{active:isActive, line:isLine}">{{message}}</h2>
  //用固定写的class和动态添加的class结合

  <h2 v-bind:class="getClass()">{{message}}</h2>
  //class中的对象比较复杂，则直接放在一个methods中,然后调用这个函数
</div>

<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"你好啊",
      active:"active",
      isActive:true,
      isLine:true
    },
    methods:{
      btn:function () {
        this.isActive=!this.isActive
      },
      //执行该函数，让isActive变为相反的值，若true变为false，若false变为true；
      //isActive的取值决定class是否用该变量，是否用对应的样式；
      getClass:function () {
        return  {active:this.isActive, line:this.isLine}
      }
      //返回，作为class的值
    }
  })
</script>

4.v-bind动态绑定class属性(数组语法)

数组语法
   :用指令v-bind；后面接一个数组，[key1,key2...]，则class值为数组中内容，可为多个；

    数组语法一般用的不多，因为它也写死了，既然写死了，可以直接用原始的方法

<body>
<div id="app">
  <h2 v-bind:class="['active','line']">{{message}}</h2>
  <h2 class="active line">{{message}}</h2>
  //这两种效果相同

  <h2 v-bind:class="getClass()">{{message}}</h2>
  //将数组放在一个methods，然后调用对应的方法
</div>

<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"你好啊",
      active:"aaa",
      line:"bbb"
      //可能是服务器返回的数据
    },
    methods:{
      getClass:function () {
        return [this.active,this.line]
      }
    }
  })
</script>

5.v-bind动态绑定内联style属性(对象语法)

 组件开发中，可能将一个导航栏封装起来，在不同地方使用这个导航栏的时候，
 可能想让他在不同的地方显示的样式不同；
 所以可以用v-bind动态绑定属性style，不同的地方可以动态显示不同的样式；

1.利用v-bind来给style动态绑定CSS内联样式。
   绑定class有两种方式：
      对象语法   （先看第一种）
      数组语法

3.格式为：
   <h2 v-bind:style="{“样式名”: “样式值”}">{{message}}</h2>
    *样式值加双引号时，则是写固定
   
   <h2 v-bind:style="{“样式名”: 样式值}">{{message}}</h2>
    *样式值不加双引号时，则当做变量，vue将它解析成一个变量， 变量值会在data中找

<div id="app">
    <h2 v-bind:style="{css属性名:属性值}">{{message}}</h2>
    <h2 v-bind:style="{'font-size': '50px'}">{{message}}</h2>、
    //css属性名和属性值需要加单引号

    <h2 v-bind:style="{'font-size': Size ,color:Color}">{{message}}</h2>
    //属性值不加单引号是4时，当做变量，动态绑定
    
    <h2 v-bind:style="{'font-size': final+'px'}">{{message}}</h2>

    <h2 v-bind:style="get()">{{message}}</h2>
    //多个样式时，可以全部放在方法
</div>

<script>
  const app = new Vue({
    el:"#app",
    data:{
      message: "你好啊",
      Size: "100px",
      final:30,
      Color:"red"
    },
    methods:{
      get:function () {
        return {'font-size': this.Size , color:this.Color}
      }
    }
  })
</script>

6.v-bind动态绑定内联style属性(数组语法)

数组语法格式为：
   <h2 v-bind:style="[base,base2]">{{message}}</h2>

<div id="app">>
  <h2 v-bind:style="[base,base2]">{{message}}</h2>
  //数组里直接放data中的变量,变量值为一个样式(样式名：样式值)
</div>

<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"你好啊",
      base:{background:"red"},
      base2:{"font-size":"100px"}
    }
  })
</script>

7.小练习v-for、v-bind

要求：点击列表哪一项，该项的文字变成红色；

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

<div id="app">
  <ul>
   <li v-for="(m,index) in movies"
       v-bind:class="{active:index===dex}"
       @click="get(index)">
       {{index}}. {{m}}
   </li>
  </ul>
   //1.遍历movies数组的元素、索引值
   //2.第一个默认为红色：只有index=dex=0时，才为true，才设置红色样式
   //  则只有index=0的元素才设置为红色样式；
   //3.单击，执行方法get()：调用get()时传实参index，单击则让dex=index
   //  即单击index===dex，让active:true ，则该元素设置红色样式(且第一个默认的红色还原)
</div>

<script>
  const app = new Vue({
    el:"#app",
    data:{
      movies:["海王","海尔兄弟","火影忍者","进击的巨人"],
      active:"active",
      dex:0
    },
    methods:{
      get(index) {
        this.dex=index
      }
    }
 })
</script>