vue之v-bind,v-if,v-for,v-on,v-model基本用法
Posted chosen-chen
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue之v-bind,v-if,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>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>
以上是关于vue之v-bind,v-if,v-for,v-on,v-model基本用法的主要内容,如果未能解决你的问题,请参考以下文章
vue的特殊指令 v-if v-once v-bind v-for v-on v-model
前端Vue框架 02 斗篷指令:v-cloak, 指令: 属性指令:v-bind, 表单指令:v-model, 条件指令:v-show v-if, 循环指令:v-for