Vue.js 模板语法

在上一章中我们使用了一种模板语法，在vue中又有哪些模板语法呢？

1、文本插值

文本：数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值：

1. <div>
2. <p>{{ message }}</p>
3. </div>
4. <script>
5. export default {
6. name: 'MyTemplate',
7. data () {
8. return {
9. message: '蒲公英云 Vue.js 教程'
10. }
11. }
12. }
13. </script>

2、v-html指令

1. <div>
2. <div v-html="userName"></div>
3. <div v-html="address"></div>
4. </div>
6. <script>
7. export default {
8. name: 'MyTemplate',
9. data () {
10. return {
11. userName: '蒲公英云 Vue.js 教程',
12. address: 'www.dandelioncloud.cn'
13. }
14. }
15. }
16. </script>

3、v-bind 指令

1. <div>
2. <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
3. <br><br>
4. <div v-bind:class="{'class1': use}">
5. v-bind:class 指令
6. </div>
7. </div>
8. <script>
9. export default {
10. name: 'MyTemplate',
11. data () {
12. return {
13. use: false
14. }
15. }
16. }
17. </script>

v-bind 缩写

1. <!-- 完整语法 -->
2. <a v-bind:href="url"></a>
3. <!-- 缩写 -->
4. <a :href="url"></a>

4、JavaScript 表达式

1. <div>
2. {{5+5}}<br>
3. {{ ok ? 'YES' : 'NO' }}<br>
4. {{ message.split('').reverse().join('') }}
5. <div v-bind:id="'list-' + id">蒲公英云</div>
6. </div>
7. <script>
8. export default {
9. name: 'MyTemplate',
10. data () {
11. return {
12. ok: true,
13. message: 'RUNOOB',
14. id : 1
15. }
16. }
17. }
18. </script>

5、v-if 指令

1. <div>
2. <p v-if="seen">现在你看到我了</p>
3. </div>
4. <script>
5. export default {
6. name: 'MyTemplate',
7. data () {
8. return {
9. seen: true
10. }
11. }
12. }
13. </script>

6、v-on 指令

1. <a v-on:click="doSomething">

v-on 缩写

1. <!-- 完整语法 -->
2. <a v-on:click="doSomething"></a>
3. <!-- 缩写 -->
4. <a @click="doSomething"></a>

修饰符

1. <form v-on:submit.prevent="onSubmit"></form>

7、 v-model 数据双向绑定

1. <div>
2. <p>{{ message }}</p>
3. <input v-model="message">
4. </div>
5. <script>
6. export default {
7. name: 'MyTemplate',
8. data () {
9. return {
10. message: "Dandelioncloud"
11. }
12. }
13. }
14. </script>

8、字符串反转

1. <div>
2. <p>{{ message }}</p>
3. <button v-on:click="reverseMessage">反转字符串</button>
4. </div>
5. <script>
6. export default {
7. name: 'MyTemplate',
8. data () {
9. return {
10. message: "Dandelioncloud"
11. }
12. },
13. methods: {
14. reverseMessage: function () {
15. this.message = this.message.split('').reverse().join('')
16. }
17. }
18. }
19. </script>

反转后的效果：

9、过滤器

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由”管道符”指示, 格式如下：

1. <!-- 在两个大括号中 -->
2. {{ message | capitalize }}
4. <!-- 在 v-bind 指令中 -->
5. <div v-bind:id="rawId | formatId"></div>

过滤器函数接受表达式的值作为第一个参数。

以下实例对输入的字符串第一个字母转为大写：

实例

1. <div>
2. {{ message | capitalize }}
3. </div>
5. <script>
6. export default {
7. name: 'MyTemplate',
8. data () {
9. return {
10. message: 'dandelioncloud'
11. }
12. },
13. filters: {
14. capitalize: function (value) {
15. if (!value) return ''
16. value = value.toString()
17. return value.charAt(0).toUpperCase() + value.slice(1)
18. }
19. }
20. }
21. </script>