Vue的动态属性绑定指令v-bind怎么使用

本篇内容主要讲解“Vue的动态属性绑定指令v-bind怎么使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue的动态属性绑定指令v-bind怎么使用”吧!

创新互联公司服务项目包括依兰网站建设、依兰网站制作、依兰网页制作以及依兰网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，依兰网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到依兰省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

v-bind指令是专门操作属性的指令，那么什么是属性呢？例如我们经常设置图片是src，设置鼠标悬停的文本是title，还有类class等，这种就是属性。

1、v-bind指令的介绍和基本使用

1）、作用：动态绑定属性

除了内容需要动态来实现之外，有时候元素的属性我们也希望能够动态来改变

比如可以动态绑定a元素的href属性，img的src属性等等。

2）、与插值操作的对比：

插值操作的主要作用是将Vue实例中的数据插入到模板当中，改变data中的数据可以动态改变显示的内容。而很多时候我们的属性值也是需要变化的，比如src可能是从服务器请求过来的，把值放到vue实例的data中，然后将data中的属性赋到模板中的属性里面，我们只需要修改data中的值就可以实时响应。

3）、写法：在属性前面加上v-bind:（语法糖：直接在属性前面加上 :）


<标签名 v-bind:标签属性名="vue实例中的数据属性名"/>


<标签名 :标签属性名="vue实例中的数据属性名"/>

示例


        
         // 直接报错，会被当成字符而不是变量
        
        
          // 加了v-bind:后vue会对它进行解析，把它的属性值当成变量
        百度一下
        
        
        
        百度一下

Vue的动态属性绑定指令v-bind怎么使用

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

1）、作用：

动态绑定class属性之后，class的值是一个变量，可以将它放到data中动态绑定样式

2）、用法：

v-bind:class= "{key1：value1，key2：value2}"

若对象内容value值为true，则该key样式起作用
若对象内容value值为false，则该key样式不起作用

value值放在data中作为变量，进行使用，当使用时让它为true，不使用时为false，

这样就可以动态的修改属性class的值

  //样式
 
--------------------------------------

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

  按钮
  //设置按钮，让点击按钮，颜色变化

  {{message}}
  //用固定写的class值为title和动态添加的class结合，它们不会覆盖

  {{message}}
  //class中的对象比较复杂，则直接放在一个methods中,然后调用这个函数

Vue的动态属性绑定指令v-bind怎么使用

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

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

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


	{{message}} 
	{{message}} 
	// 上面两种的效果都是一样的
	
	{{message}} 
	// 将数组放在方法中，然后调用该方法

重庆分公司，新征程启航

Vue的动态属性绑定指令v-bind怎么使用

`{{message}}`

`{{message}}`

`{{message}}`

其他资讯