zoukankan      html  css  js  c++  java
  • vue之v-bind,v-if,v-for,v-on,v-model基本用法

     总结: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

  • 相关阅读:
    LINUX下用PHPIZE安装PHP GD扩展
    LNMP下使用Phabricator(一)
    关于学习
    PHP EXCEL相关
    curl_setopt 注意
    JS代码运行延迟
    ajax跨域
    Bootstrap-下拉菜单
    Bootstrap-基本的按钮组
    Bootstrap-基本的输入框组
  • 原文地址:https://www.cnblogs.com/3542446186qq/p/12163021.html
Copyright © 2011-2022 走看看