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中v-for 与 v-if 使用错误

前端Vue框架 02 斗篷指令：v-cloak, 指令: 属性指令：v-bind, 表单指令：v-model, 条件指令：v-show v-if, 循环指令：v-for

vue核心最基本功能

vue的注意规范之v-if 与 v-for 一起使用

vue.js v-for 一定要与v-bind:key="id" 联用