首页 > 其他 > 详细

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

时间:2020-01-07 19:40:01      阅读:93      评论:0      收藏:0      [点我收藏+]
 总结:v-bind,v-if,v-for,v-on,{{}},v-model
        ①v-bind绑定数据:标签属性v-bind:title=‘xxx‘,简写:title=‘xxx‘, 标签内容{{xxx}}
         <span :title=‘message‘>{{message}}</span>
        ②v-on绑定事件:<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
        ④v-if遍历:<span v-for=‘item in array‘>{{item}}</span> 或 <span v-for=‘(item,index) in array‘>{{index}}</span>
        ⑤v-model数据双向绑定:<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(‘‘)
             }
           }
         })

https://www.cnblogs.com/chosen-chen/p/11245529.html

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

原文:https://www.cnblogs.com/3542446186qq/p/12163021.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!