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

 
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
 <div id="app">{{ message }}</div>
 <div id="app2" v-if='true>
   <span :title='message'>
       鼠标悬停几秒钟查看此处动态绑定的提示信息！！！！！
   </span><br />
   <span v-bind:title="message">
     鼠标悬停几秒钟查看此处动态绑定的提示信息！
   </span>
 </div>
 <div id='app3'>
   <ol>
     <li v-for='todo in todos'>{{todo.text}}</li>
   </ol>
 </div>
 <div id="app4">
   <p>{{ message }}</p>
   <button v-on:click="reverseMessage">反转消息</button><br />
   <button @click='reverseMessage2'>反转消息</button>
 </div>
 <div id="app5">
   <p>{{ message }}</p>
   <input v-model="message">
 </div>
 <script>
   let app = new Vue({
     el: '#app',
     data: {
       message: '哈哈哈'
     }
   })
   let app2 = new Vue({
     el: '#app2',
     data: {
       message: '页面加载于 ' + new Date().toLocaleString()
     }
   })
   let app3 = new Vue({
     el: '#app3',
     data: {
       todos:[
         { text: '学习 JavaScript' },
         { text: '学习 Vue' },
         { text: '整个牛项目' }
       ]
     }
   })
   let app4 = new Vue({
     el: '#app4',
     data: {
       message: 'Hello Vue.js!'
     },
     methods: {
       reverseMessage: function() {
         this.message = this.message.split('').reverse().join('')
       },
       reverseMessage2(){
         this.message = this.message.split('').reverse().join('')
       }
     }
   })
   // 表单v-model双向绑定
   let app5 = new Vue({
     el: '#app5',
     data: {
       message: '你还好吗？'
     }
   })
 </script>
 <script>
   /*
     总结：v-bind,v-if,v-for,v-on,{{}},v-model
     ①绑定数据：标签属性v-bind:title='xxx',简写:title='xxx', 标签内容{{xxx}}
       <span :title='message'>{{message}}</span>
     ②绑定事件：<span v-on:click='clickMe'>点我</span> 或简写 <span @click='clickMe'>点我</span>
     ③显示和隐藏：<span v-if='xxx'>显示和隐藏</span> ,注，xxx可以为表达式或者是Boolean后为true或false的其他值
       v-if='undefined == null',v-if='-1'都为true。 v-if='null',v-if='undefined',v-if='0'都为false
     ④遍历：<span v-for='item in array'>{{item}}</span> 或 <span v-for='(item,index) in array'>{{index}}</span>
     ⑤表单双向绑定：<input v-model='message'></input><p>{{message}}</p>
     ⑥创建vue实例语法
       引入vue库
       let app = new Vue({
         el: '#id',
         data: {
           message: '你还好吗？'
         },
         methods: {
           //this指app实例，可通过控制台app.message = '好久不见',  直接修改页面内容
           clickMe:function(e){
             this.message = this.message.split('').reverse().join('')
           }
         }
       })
   */
 </script>
</body>
</html> 
 
 
   
   
   
 
vue之v-bind，v-if，v-for，v-on，v-model基本用法

猜你喜欢
