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

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

渲染结果：

 

原文地址：http://www.cnblogs.com/victor1234/p/16855882.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性