3.vue的插值语法

插值语法就是将希望显示在页面的文本渲染出来，语法是{{}},在双大括号中可以添加变量，函数，表达式

1.渲染变量

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <!-- 引入vue.js-->
 7     <script src="js/vue.js"></script>
 8 </head>
 9 <body>
10 <div id="app">
11     <!--    通过vue的插值语法，渲染name变量-->
12     <h1>{{name}}</h1>
13     <h1>{{age}}</h1>
14     <h1>{{hobby}}</h1>
15     <!--    数组通过索引取值-->
16     <h1>{{hobby[0]}}</h1>
17     <!--    对象通过键取值-->
18     <h1>{{info.address}}</h1>
19 </div>
20 </body>
21 <script>
22     new Vue({
23         // vue管理的区域,所有的vue语法仅在该区域内生效
24         el: '#app',
25         data: {
26             name: 'kunmzhao',
27             age: 18,
28             hobby: ['跑步', '爬山', '作死'],
29             info: {'address': '上海市', 'gender': 'man'}
30         }
31     })
32 </script>
33 </html>

View Code

显示效果：

2.渲染函数

当双括号里面的是函数时，会先执行函数。然后将结果渲染在页面

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <!-- 引入vue.js-->
 7     <script src="js/vue.js"></script>
 8 </head>
 9 <body>
10 <div id="app">
11     <h1>{{info.split(' ').reverse()}}</h1>
12 </div>
13 </body>
14 <script>
15     new Vue({
16         // vue管理的区域,所有的vue语法仅在该区域内生效
17         el: '#app',
18         data: {
19             info:'hello world'
20         }
21     })
22 </script>
23 </html>

View Code

结果：

3.渲染表达式

将表达式执行的结果渲染在页面中

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <!-- 引入vue.js-->
 7     <script src="js/vue.js"></script>
 8 </head>
 9 <body>
10 <div id="app">
11     <h1>{{age >= 18 ? '已成年' : '未成年'}}</h1>
12     <h1>{{salary += 180}}</h1>
13 </div>
14 </body>
15 <script>
16     new Vue({
17         // vue管理的区域,所有的vue语法仅在该区域内生效
18         el: '#app',
19         data: {
20             age: 18,
21             salary: 1000
22         }
23     })
24 </script>
25 </html>

View Code

渲染结果：

posted on 2022-11-03 21:11 阿明明阅读(170) 评论(0) 收藏举报