Vue第二天

一、V-model双向数据绑定

1.用于表单元素
html：

<div id="itany">
    <input type="text" v-model="msg"/>
    <h1>{{msg}}</h1>
</div>

js：

new Vue({
    el:'#itany',
    data:{
        msg:'hello Vue'
    }
})

二、V-on

click
html：

<div id="itany">
    <button v-on:click="alt">按钮</button>
</div>

js：

new Vue({
    el:'#itany',
    methods:{
        alt:function(){
            alert("Vue")
        }
    }
})

三、V-show

显示/隐藏
HTML：

<div id="itany">
    <button v-on:click="chg">隐藏</button>
    <div v-show="see" class="qq"></div>
</div>

js：

new Vue({
    el:'#itany',
    data:{
        see:true,
        arr:[true,false]
    },
    methods:{
        chg:function(){
                if(this.see){
                    this.see=false
            }else{
                this.see=true
            }
//          this.see=!this.see
        }
    }
})

四、V-if

<div id="app">
    <p v-if="num==0">00000000</p>
    <p v-else-if="num==1">111111111</p>
    <p v-else-if="num==2">22222222</p>
    <p v-else-if="num==3">3333333</p>
    <p v-else-if="num==4">44444444</p>
    <p v-else="num==5">555555</p>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js">
<script>
    new Vue({
        el:'#app',
        data:{
            num:Math.fooor(Math.random()*(5-0+1)+0)//此处为随机数
          //随机数公式为num:Math.floor(Math.random()*(max-min+1)+min)
        }
    })
</script>

v-if控制元素的显示与隐藏，但与v-show不同的是，v-if、v-else、v-else-if是使用visibity:hidden；v-if显示隐藏是将dom元素整个添加或删除
v-if,v-else,v-else-if 与原生js一样

display:none与visibity:hidden的区别：

display:none是将元素完全隐藏，并且元素不占用页面空间，所占空间会被其它元素占用，功能完全消失（不保留物理空间）
visibity:hidden是将元素隐藏，所占用空间不变，只是不显示元素，功能完全消失（保留物理空间）