目录

1、v-bind

1、基本使用

2、v-bind动态绑定属性class&＃xff08;对象语法&＃xff09;

3、v-bind动态绑定属性class&＃xff08;数组语法&＃xff09;

4、bind动态绑定style&＃xff08;对象语法&＃xff09;

5、bind动态绑定style&＃xff08;数组语法&＃xff09;

2、v-for和v-bind的结合使用&＃xff08;例子&＃xff09;

1、v-bind

1、基本使用

在开发的时候&＃xff0c;有时候我们的属性不是写死的&＃xff0c;有可能是根据我们的一些数据动态地决定的&＃xff0c;比如图片标签&＃xff08;&＃xff09;的src属性&＃xff0c;我们可能从后端请求了一个包含图片地址的数组&＃xff0c;需要将地址动态的绑定到src上面&＃xff0c;这时就不能简单的将src写死。还有一个例子就是a标签的href属性。这时可以使用v-bind指令&＃xff1a;

• 　　作用&＃xff1a;动态绑定属性&＃xff1b;
• 　　缩写&＃xff08;语法糖&＃xff09;&＃xff1a;: (只用一个冒号代替)&＃xff1b;

                       v-bind有一个对应的语法糖&＃xff0c;也就是简写方式 在开发中&＃xff0c;我们通常会使用语法糖的形式&＃xff0c;因为这样更加简洁。 简写方式如下&＃xff1a;

• 　　预期&＃xff1a;

　　　　&＃xff08;1&＃xff09;any (with argument)&＃xff0c;任意参数&＃xff1b;

　　　　&＃xff08;2&＃xff09;Object (without argument)&＃xff0c;对象 。

• 　　参数&＃xff1a;attrOrProp (optional)

百度一下百度一下

 服务器请求过来的数据&＃xff0c;我们一般都会在data那里做一下中转&＃xff0c;做完中转过后再把需要的变量绑定到对应的属性上面。

2、v-bind动态绑定属性class&＃xff08;对象语法&＃xff09;

　　v-bind除了在开发中用在有特殊意义的属性外&＃xff08;src, href等&＃xff09;&＃xff0c;也可以绑定其他一些属性&＃xff0c;如class。

{{message}}

对象语法有下面这些用法&＃xff1a;

用法一&＃xff1a;直接通过{}绑定一个类


Hello World

用法二&＃xff1a;也可以通过判断&＃xff0c;传入多个值

Hello World

用法三&＃xff1a;和普通的类同时存在&＃xff0c;并不冲突
注&＃xff1a;如果isActive和isLine都为true&＃xff0c;那么会有title/active/line三个类

Hello World

用法四&＃xff1a;如果过于复杂&＃xff0c;可以放在一个methods或者computed中
注&＃xff1a;classes是一个计算属性

Hello World

例子&＃xff1a;

3、v-bind动态绑定属性class&＃xff08;数组语法&＃xff09;

数组语法的含义是:class后面跟的是一个数组

4、bind动态绑定style&＃xff08;对象语法&＃xff09;

:style&＃61;"{color: currentColor, fontSize: fontSize &＃43; &＃39;px&＃39;}"

style后面跟的是一个对象类型

•          对象的key是CSS属性名称
•          对象的value是具体赋的值&＃xff0c;值可以来自于data中的属性

5、bind动态绑定style&＃xff08;数组语法&＃xff09;

style后面跟的是一个数组类型 多个值以&＃xff0c;分割即可

2、v-for和v-bind的结合使用&＃xff08;例子&＃xff09;

题目&＃xff1a;要求点击某个li&＃xff0c;这个li的字体变为红色

代码&＃xff1a;







• {{m&＃43;index}}





参考链接&＃xff1a;

https://www.bilibili.com/video/BV1H7411j7Mc

https://www.cnblogs.com/ongiao/p/12141980.html