/
#vue

Vue.js从入门到跑路-模板语法

上文我们提到了模板语法,除了最常用的文本插值,我们还需要学会以下几种

插入 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 属性,表达式的值除了字符串,你还可以设置数组或者对象