vue.jsv-html,关于vue.jsv-bind的一些理解和思考.pdf

关关于于vue.js v-bind 的的一一些些理理解解和和思思考考

一一、、v-bind 初初探探

它是一个 vue 指令，用于绑定 html 属性，如下：

html属性不能使用双大括号形式绑定，只能使用v-bind指令

var vm = new Vue({

el: '#app',

data: {

title: 'title c ntent '

}

});

这里的 html 最后 渲染成：

html属性不能使用双大括号形式绑定，只能使用v-bind指令

二二、、指指令令预预期期值值

上面这种 v-bind 这也是我们对于 vue 指令最初的理解，但实际上，vue 指令的预期值 (如 v-bind :class="classProperty" 中，v-

bind 是指令，: 后面的 class 是参数，而 classProperty 则在官方文档中被称为“预期值”)，除了像上面那样绑定一个字符串类型

变量，其实它是支持一个单一 JavaScript 表达式 (v-for 除外)。

所以在这里，我们就可以有更多的选择，例如：

((1))执执行行运运算算

html属性不能使用双大括号形式绑定，只能使用v-bind指令

var vm = new Vue({

el: '#app',

data: {

t1: 'title1',

t2: 'title2'

}

});

最后渲染的结果：

html属性不能使用双大括号形式绑定，只能使用v-bind指令

((2))执执行行函函数数等等

html属性不能使用双大括号形式绑定，只能使用v-bind指令

var vm = new Vue({

el: '#app',

data: {

getTitle: functi n () {

return 'title c ntent ';

}

}

});

最后渲染的结果：

html属性不能使用双大括号形式绑定，只能使用v-bind指令

三三、、支支持持的的数数据据类类型型

上面的内容，指令预期值得到的都是字符串类型的数据，但实际上，我们知道 j s 有很多数据类型，它如果放入其中呢？

((1))对对象象类类型型

c ntent

var bj = {};

var vm = new Vue({

el: '#app',

data: {

bj: bj

}

});

为什么一来就选择对象类型呢？答案是它比较有代表性，它渲染结果如下：