小码哥教育笔记之v-bind

v-bind介绍

■前面我们学习的指令主要作用是将值插入到我们模板的内容当中。
■但是,除了内容需要动态来决定外,某些属性我们也希望动态来绑定
口比如动态绑定a元素的href属性
口比如动态绑定img元素的src属性
■这个时候,我们可以使用v-bind指令:
口作用:动态绑定属性
口缩写::
口预期:any (with argument)|Object (without argument)
口参数:attrOrProp(optional)

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

Mustache

■如何将data中的文本数据,插入到HTML中呢?
口我们已经学习过了,可以通过Mustache语法(也就是双大括号)。
口Mustache: 胡子/胡须.
■我们可以像下面这样来使用,并目数据是响应式的

小码哥教育笔记之v-bind

V-bind基础

■v-bind用于绑定一个或多个属性值,或者向另一个组件传递props值(这个学到组件时再介绍)
■在开发中,有哪些属性需要动态进行绑定呢?
口还是有很多的,比如图片的链接src、网站的链接href、动态绑定一些类、样式等等
■比如通过Vue实例中的data绑定元素的src和href,代码如下:
小码哥教育笔记之v-bind

v-bind语法糖

■v-bind有一个对应的语法糖,也就是简写方式
口在开发中,我们通常会使用语法糖的形式,因为这样更加简洁。
■简写方式如下:
小码哥教育笔记之v-bind

V-bind绑定class(一)

■很多时候,我们希望动态的来切换class,比如:
口当数据为某个状态时,字体显示红色。
口当数据另一个状态时,字体显示黑色。
■绑定cass有两种方式:
口对象语法
口数组语法

V-bind绑定class(二)

■绑定方式:对象语法
口对象语法的含义是:class后面跟的是一个对象
■对象语法有下面这些用法:

小码哥教育笔记之v-bind

v-bind绑定class(三)

■绑定方式:数组语法
口数组语法的含义是:class后面跟的是一个数组。
■数组语法有下面这些用法:
小码哥教育笔记之v-bind

v-bind绑定style(一)

■我们可以利用v-bind:style来绑定一些CSS内联样式
■在写CSS属性名的时候,比如font-size
口我们可以使用驼峰式(camelCase) fontSize
口或短横线分隔(kebab-case,记得用单引号括起来)'font-size
■绑定class有两种方式:
口对象语法
口数组语法

v-bind绑定style(二)

小码哥教育笔记之v-bind

上一篇:Vue进阶 之 动态绑定Class 详解


下一篇:wex5当中,页面输入框选择中时,js去除输入框投影方法