插值语法就是将希望显示在页面的文本渲染出来,语法是{{}},在双大括号中可以添加变量,函数,表达式
1.渲染变量
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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.渲染函数
当双括号里面的是函数时,会先执行函数。然后将结果渲染在页面
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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.渲染表达式
将表达式执行的结果渲染在页面中
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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