Vue.js学习笔记：v-bind属性绑定（class,src）

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

香柠檬YU

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

阅读量9.1k

点赞数 2

分类专栏： Vue.js 文章标签： vue.js 数据双向绑定属性绑定 class src

本文链接：https://blog.csdn.net/sinat_36841379/article/details/75273079

版权

Vue.js 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

v-bing指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如比较常用的是v-bind:class。

是主要用于属性绑定的，因为比较常用，所以有缩写的用法。

一.绑定HTML Class

首先，我们可以来看看，给一个元素绑定一个v-bind:class对象，用来动态切换class.相当于是jQuery中的toggle()方法，或者是addClass(),removeClass()方法。





    
    
Vue.js
<script src="https://unpkg.com/vue/dist/vue.js"></script>





    
    

     
     
{{text}}


    
    


<script>
new Vue({
	el:'#app',
	data:{
		isRed:false,
		isGreen:true,
		text:'this is a green text'
	}
	})
</script>

很明显，运行的结果是p元素的背景颜色是green。

当isRed和isGreen变化的时候，class列表也相应地进行更新。如果将isRed改为true,isGreen改为false的话，那么p元素的背景颜色就会变为红色。

而且当:class=的值是使用"{ }"来括起的形式，就说明这个是一个对象，里面是有boolean值的运算的。

如果值是一个数组的话，那会是什么情况呢？





    
    
Vue.js
<script src="https://unpkg.com/vue/dist/vue.js"></script>





    
    

     
     
{{text}}


    
    
<script>
new Vue({
	el:'#app',
	data:{
		classA:'red',
		classB:'yellow',
		text:'this is a red text'
	}
	})
</script>

运行的结果是一段背景颜色为红色为文本。

而:class=的值是一个以数组的形式括起来的，里面保存的是字符串的形式

二.绑定HTML src

我们可以使用:src来动态绑定数据，例如 <img :src="url" alt="图片"/>

script代码：

new Vue({
   el:'#app',
   data:{
       url:'1.png'
   }
   })