插值语法就是将希望显示在页面的文本渲染出来，语法是{{}},在双大括号中可以添加变量，函数，表达式
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
渲染结果：
标签：info,vue,渲染,插值,18,age,语法 From： https://www.cnblogs.com/victor1234/p/16855882.html