vue的特殊指令 v-if v-once v-bind v-for v-on v-model

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>特殊指令</title>
 8     <script src="vue.js"></script>
 9 </head>
10 <body>
11     
12 
13 
14     <div id="app">
15         <!-- v-once 只能渲染一次。const -->
16 
17         <!-- v-bind----vue提供的特殊指令：表示将这个元素的节点title特性和vue实例的aaa属性保持一致 -->
18         <span v-bind:title="aaa">
19             鼠标悬停几秒钟查看此处动态绑定的提示信息！
20         </span>
21 
22         <!-- v-if控制切换一个元素是否显示 -->
23         <p v-if='seen'>现在你看到我了</p>
24 
25         <!-- 特殊指令v-for='todo in 循环数组的名称'      绑定数组的数据来渲染一个列表 -->
26         <ol>
27             <li v-for='todo in todos'>
28                 {{todo.text}}
29             </li>
30         </ol>
31 
32         <!-- v-on添加事件监听器  -->
33         <p>{{content}}</p>
34         <button v-on:click="reverseContent">反转内容</button><!-- 当点击按钮时触发reverseContent函数 -->
35 
36         <!-- v-model  实现表单输入和应用状态之间的双向绑定 -->
37         <p>{{main}}</p>
38         <input type="text" v-model="main">
39     </div>
40 
41     <script>
42             // vue基础操作语法，特殊指令介绍
43             var app = new Vue({
44                 el: '#app',
45                 data: {
46                     // v-bind
47                     aaa: '页面加载于'+new Date().toString(),
48                     // 控制台输出app.message=""  app.name=""  app.aaa=""  ,页面会响应式变化
49     
50                     // v-if
51                     seen: true,
52                     //控制台输出app.seen=false  p元素在页面中就看不到了  记住此处不能加引号
53     
54                     // v-for
55                     todos: [
56                         {text: '学习js'},
57                         {text: '学习vue'},
58                         {text: '好事'}
59                     ],
60                     //在控制台输入app.todos.push({text:'新li'})，就可以在页面列表中添加一条新项
61     
62                     // v-on绑定事件
63                     content: '我爱学习',
64     
65                     // v-model表单和p标签内容双向绑定
66                     main: '请输入内容'
67                 },
68                 methods:{
69                     reverseContent:function() {
70                         this.content = this.content.split('').reverse().join('')
71                     }
72                 }
73             });
74     
75         </script>
76 </body>
77 </html>
vue的特殊指令 v-if v-once v-bind v-for v-on v-model

猜你喜欢
