在上一章中我们使用了一种模板语法,在vue中又有哪些模板语法呢?
1、文本插值
文本:数据绑定最常见的形式就是使用 {{…}}(双大括号)的文本插值:
<div>
<p>{{ message }}</p>
</div>
<script>
export default {
name: 'MyTemplate',
data () {
return {
message: '蒲公英云 Vue.js 教程'
}
}
}
</script>
2、v-html指令
<div>
<div v-html="userName"></div>
<div v-html="address"></div>
</div>
<script>
export default {
name: 'MyTemplate',
data () {
return {
userName: '蒲公英云 Vue.js 教程',
address: 'www.dandelioncloud.cn'
}
}
}
</script>
3、v-bind 指令
<div>
<label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1': use}">
v-bind:class 指令
</div>
</div>
<script>
export default {
name: 'MyTemplate',
data () {
return {
use: false
}
}
}
</script>
v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
4、JavaScript 表达式
<div>
{{5+5}}<br>
{{ ok ? 'YES' : 'NO' }}<br>
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id">蒲公英云</div>
</div>
<script>
export default {
name: 'MyTemplate',
data () {
return {
ok: true,
message: 'RUNOOB',
id : 1
}
}
}
</script>
5、v-if 指令
<div>
<p v-if="seen">现在你看到我了</p>
</div>
<script>
export default {
name: 'MyTemplate',
data () {
return {
seen: true
}
}
}
</script>
6、v-on 指令
<a v-on:click="doSomething">
v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
修饰符
<form v-on:submit.prevent="onSubmit"></form>
7、 v-model 数据双向绑定
<div>
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
export default {
name: 'MyTemplate',
data () {
return {
message: "Dandelioncloud"
}
}
}
</script>
8、字符串反转
<div>
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转字符串</button>
</div>
<script>
export default {
name: 'MyTemplate',
data () {
return {
message: "Dandelioncloud"
}
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
}
</script>
反转后的效果:
9、过滤器
Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化。由”管道符”指示, 格式如下:
<!-- 在两个大括号中 -->
{{ message | capitalize }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
过滤器函数接受表达式的值作为第一个参数。
以下实例对输入的字符串第一个字母转为大写:
实例
<div>
{{ message | capitalize }}
</div>
<script>
export default {
name: 'MyTemplate',
data () {
return {
message: 'dandelioncloud'
}
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
}
</script>