v-bind ｜ 青训营笔记

---

theme: condensed-night-purple

highlight: a11y-dark

这是我参与「第四届青训营 」笔记创作活动的的第17天

前面我们学习的指令主要作用是将值插入到我们模板的内容当中。

但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。 比如动态绑定a元素的href属性 比如动态绑定img元素的src属性

这个时候，我们可以使用v-bind指令∶

作用︰动态绑定属性

缩写︰ : 语法糖

预期:any (with argument) | Object (without argument)

参数:attrOrProp (optional)

下面，我们就具体来学习v-bind的使用。

v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值(这个学到组件时再介绍)

在开发中，有哪些属性需要动态进行绑定呢? 比如图片的链接src、网站的链接href、动态绑定一些类、样式等等 比如通过Vue实例中的data绑定元素的src和href，代码如下︰

```

百度一下

```

v-bind动态绑定class属性

一. 绑定方法：对象语法 -- class后面跟一个对象

v-bind可以给class赋字符串，也可以赋对象， 类名+boolean，boolean值为true将类名添加给标签，<h3>通过boolean值判断标签是否有该类名</h3>

用之前的class写法，vue会自己将他们合并 固定的class用原先的方法，可能之后会修改的class用vue方法

用法：

1. 直接通过{}绑定一个类 <h2 v-bind:class="{active: isactive}">{{message}}</h2>

2. 也可以通过判断,传入多个值 <h2 v-bind:class="{active: true, line: false}">{{message}}</h2>

3. 和普通的类同时存在,并不冲突 注:如果isActive和isLine都为true，那么会有title/active/line三个类 <h2 class="title" v-bind:class="{active: isactive, line: isline}">{{message}}</h2>

4. 如果过于复杂,可以放在一个methods或者computed中 注: classes是一个计算属性 <h2 class="title" :class="classes">Hello world</h2>

5. 在调用methods里的函数，接收返回值 <h2 class="title" v-bind:class="getclasses()">{{message}}</h2>

二. 绑定方法：数组语法 -- class后面跟一个数组

用法：

用法一:直接通过[]绑定一个类 <h2 :class="['active']">Hello world</h2>

用法二:也可以传入多个值 :class="['active', 'line' ] ">Hello world</h2>

用法三:和普通的类同时存在，并不冲突 注:会有title/ active/line三个类 <h2 class="title" :class="[ 'active', 'line' ]">Hello world</h2>

用法四:如果过于复杂，可以放在一个methods或者computed中 注: classes是一个计算属性 <h2 class="title" :class="classes">Hello world</h2>

```

{{message}}

{{message}}

// 调用函数要加()，运算符，表示执行方法，不加是绑定

hello,world

// 字符串，写死

hello,world

// 用变量，动态替换

hello,world

// 函数返回值 按钮

```

作业：第一条为红色，之后点击谁谁变为红色 v-on v-for 下标 ```

• {{movies[0]}}
• {{movies[1]}}
• {{movies[2]}}
• {{movies[3]}}
• {{item}}

```

v-bind绑定style

我们可以利用v-bind:style来绑定一些CSS内联样式。 // 为什么要动态绑定style，在组件化开发中，例如京东的导航栏不同页面不一样，写在css上面不好修改

在写CSS属性名的时候，比如font-size 我们可以使用驼峰式(camelCase) fontSize 或短横线分隔(kebab-case，记得用单引号括起来)'font-size' // 报错

绑定class有两种方式:

绑定方式一:对象语法 :style="{color: currentcolor,fontsize: fontsize + 'px'}" style后面跟的是一个对象类型 对象的key是css属性名称 对象的value是具体赋的值，值可以来自于data中的属性

绑定方式二:数组语法

```

{{message}}

// '50px' 之前写法中css样式不加'',在vue里面，不加''会当作变量解析，找不到该变量会报错

{{message}}

// finalsize没有'',当成变量使用

{{message}}

{{message}}

{{message}}

```