上文我们提到了模板语法,除了最常用的文本插值,我们还需要学会以下几种
插入 html:v-html(不推荐不建议使用)
<span v-html="rawHtml"></span></p>
span 的内容会被 v-html 里的内容替代
绑定属性
<div v-bind:id=id></div>
这行代码的意思是将组件中的 id 属性和元素的 id 进行绑定 我们可以将 v-bind:简写成: 即
<div :id=id></div>
由于我们的组件中的 id 属性和元素中的 id 同名,我们还可以简写成
<div :id></div>
绑定的属性支持布尔型,我们以一个按钮为示例,我们可以通过绑定 disabled 来控制按钮的可用性
<button :disabled="isButtonDisabled">Button</button>
在所有的数据绑定中,都支持 JavaScript 表达式,如:
{{ number + 1 }}
v-bind 支持绑定 style 和 class 属性,表达式的值除了字符串,你还可以设置数组或者对象