Vuejs学习系列(十七)--模板语法(三)

3.属性

Mustache 不能在 HTML 属性中使用,应使用v-bind指令:

这对布尔值的属性也有效—— 如果条件被求值为 false 的话该属性会被移除:

Button

Vuejs学习系列(十七)--模板语法(三)_第1张图片

运行结果:

Vuejs学习系列(十七)--模板语法(三)_第2张图片

选中修改颜色,界面显示如下

Vuejs学习系列(十七)--模板语法(三)_第3张图片

4.使用JavaScript 表达式

迄今为止,在我们的模板中,我们一直都只绑定简单的属性键值。但实际上,对于所有的数据绑定,Vue.js都提供了完全的JavaScript 表达式支持。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

这些表达式会在所属Vue 实例的数据作用域下作为JavaScript被解析。有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效。


{{ var a = 1 }}


{{ if (ok) { return message } }}

Vuejs学习系列(十七)--模板语法(三)_第4张图片

运行结果如下

Vuejs学习系列(十七)--模板语法(三)_第5张图片

你可能感兴趣的:(Vuejs学习系列(十七)--模板语法(三))