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

最新推荐文章于 2025-07-02 15:06:50 发布

香柠檬YU

最新推荐文章于 2025-07-02 15:06:50 发布

阅读量9.2k

点赞数 2

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/sinat_36841379/article/details/75273079

Vue.js 专栏收录该内容

3 篇文章

订阅专栏

本文介绍Vue.js中v-bind指令的应用，包括如何绑定HTML Class和src属性实现动态样式切换及图片加载。通过示例展示了不同绑定方式的效果。

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

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

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

一.绑定HTML Class

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

Vue.js



{{text}}


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


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


而且当:class=的值是使用"{  }"来括起的形式，就说明这个是一个对象，里面是有boolean值的运算的。
如果值是一个数组的话，那会是什么情况呢？

Vue.js



{{text}}




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

而:class=的值是一个以数组的形式括起来的，里面保存的是字符串的形式
    二.绑定HTML src
我们可以使用:src来动态绑定数据，例如 <img :src="url" alt="图片"/>
script代码：
new Vue({

    el:'#app',

    data:{

       url:'1.png'

    }

    })