vue之v-bind,v-if,v-for,v-on,v-model基本用法

2019/07/25 17:14
阅读数 115
  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>Document</title>
  8   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  9 </head>
 10 <body>
 11   <div id="app">{{ message }}</div>
 12   <div id="app2" v-if='true>
 13     <span :title='message'>
 14         鼠标悬停几秒钟查看此处动态绑定的提示信息!!!!!
 15     </span><br />
 16     <span v-bind:title="message">
 17       鼠标悬停几秒钟查看此处动态绑定的提示信息!
 18     </span>
 19   </div>
 20   <div id='app3'>
 21     <ol>
 22       <li v-for='todo in todos'>{{todo.text}}</li>
 23     </ol>
 24   </div>
 25   <div id="app4">
 26     <p>{{ message }}</p>
 27     <button v-on:click="reverseMessage">反转消息</button><br />
 28     <button @click='reverseMessage2'>反转消息</button>
 29   </div>
 30   <div id="app5">
 31     <p>{{ message }}</p>
 32     <input v-model="message">
 33   </div>
 34   <script>
 35     let app = new Vue({
 36       el: '#app',
 37       data: {
 38         message: '哈哈哈'
 39       }
 40     })
 41     let app2 = new Vue({
 42       el: '#app2',
 43       data: {
 44         message: '页面加载于 ' + new Date().toLocaleString()
 45       }
 46     })
 47     let app3 = new Vue({
 48       el: '#app3',
 49       data: {
 50         todos:[
 51           { text: '学习 JavaScript' },
 52           { text: '学习 Vue' },
 53           { text: '整个牛项目' }
 54         ]
 55       }
 56     })
 57     let app4 = new Vue({
 58       el: '#app4',
 59       data: {
 60         message: 'Hello Vue.js!'
 61       },
 62       methods: {
 63         reverseMessage: function() {
 64           this.message = this.message.split('').reverse().join('')
 65         },
 66         reverseMessage2(){
 67           this.message = this.message.split('').reverse().join('')
 68         }
 69       }
 70     })
 71     // 表单v-model双向绑定
 72     let app5 = new Vue({
 73       el: '#app5',
 74       data: {
 75         message: '你还好吗?'
 76       }
 77     })
 78   </script>
 79   <script>
 80     /*
 81       总结:v-bind,v-if,v-for,v-on,{{}},v-model
 82       ①绑定数据:标签属性v-bind:title='xxx',简写:title='xxx', 标签内容{{xxx}}
 83         <span :title='message'>{{message}}</span>
 84       ②绑定事件:<span v-on:click='clickMe'>点我</span> 或简写 <span @click='clickMe'>点我</span>
 85       ③显示和隐藏:<span v-if='xxx'>显示和隐藏</span> ,注,xxx可以为表达式或者是Boolean后为true或false的其他值
 86         v-if='undefined == null',v-if='-1'都为true。 v-if='null',v-if='undefined',v-if='0'都为false
 87       ④遍历:<span v-for='item in array'>{{item}}</span> 或 <span v-for='(item,index) in array'>{{index}}</span>
 88       ⑤表单双向绑定:<input v-model='message'></input><p>{{message}}</p>
 89       ⑥创建vue实例语法
 90         引入vue库
 91         let app = new Vue({
 92           el: '#id',
 93           data: {
 94             message: '你还好吗?'
 95           },
 96           methods: {
 97             //this指app实例,可通过控制台app.message = '好久不见',  直接修改页面内容
 98             clickMe:function(e){
 99               this.message = this.message.split('').reverse().join('')
100             }
101           }
102         })
103     */
104   </script>
105 </body>
106 </html>

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部