v-show、v-if、v-bind

1.v-show和v-if的区别
v-show/v-if都可以控制元素的显示和隐藏，但是方式不一样，v-show使用的是display:none来控制的，v-if 使用的是visibility:hidden来控制的
2.display:none和visibility:hidden的区别
visibility: hidden----将元素隐藏，但是在网页中该占的位置还是占着。
display: none----将元素的显示设为无，即在网页中不占任何的位置。
例如有三个table，将中间的一个table hidden掉，你会发现在那个被hidden的table看不见了，但是，中间 会留有很大的一空白，而这个空白就是这个table没有被隐藏时所占的位置
而none的作用更像是把元素从网页中“去除”（当然不是真的去除，只是效果是如此）
例如有三个table，将中间的一个table none掉，你会发现在剩下的两个table中间不会有任何的空白。就好 像中间的那个table从来不存在过一样
3.v-bind
v-bind绑定属性，v-bind:属性名=‘值’，也可以省略v-bind,直接在属性前面加冒号:, :属性名=‘值’
1.v-show/v-if：控制元素的显示隐藏

<div id='itany'>
    <p>此内容可见</p>
    <p v-show=!see>此内容不可见</p>
    <p>此内容可见</p>
    <p v-if=!see>此内容不可见</p>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#itany',
        data:{
            see:true
        }
    })
</script>

2.v-bind:绑定属性

<div id='itany'>
    <img v-bind:src="url" alt="" @click='chg'>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#itany',
        data:{
            url:'./2.jpg',
            hef:'./1.jpg'
        },
        methods:{
            chg:function(){
                this.url=this.hef
            }
        }
    })
</script>

4.案例
显示/隐藏

<meta charset="UTF-8">
<title>Document</title>
<style>
    p{
        width:100px;
        height:100px;
        background:pink;
    }
</style>

<div id='itany'>
    <button v-on:click='datl'>隐藏/显示</button>
    <p v-show=see></p>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#itany',
        data:{
            see:'true'
        },
        methods:{
            datl:function(){
                this.see=!this.see
            }
        }
    })
</script>

图片切换

<meta charset="UTF-8">
<title>Document</title>
<style>
    li{
        float: left;
        list-style: none;
        width:50px;
        height:50px;
        border: 1px solid #000;
        text-align: center;
        line-height: 50px;
    }
    img{
        width:290px;
        height: 250px;
    }
</style>
<div id='itany'>
    <img v-bind:src="url" alt="">
    <ul>
        <li v-for='(value,index) in arr' @click='chg(index)'>{{index+1}}</li>
    </ul>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#itany',
        data:{
            url:'./1.jpg',
            arr:['./1.jpg','2.jpg','3.jpg','4.jpg','5.jpg']
        },
        methods:{
            chg:function(ind){
                this.url=this.arr[ind]
            }
        }
    })
</script>

添加/删除水果列表

<div id='itany'>
    <input type="text" v-model='add'>
    <button v-on:click='mou'>添加</button>
    <ul>
        <li v-for="(val,index) in arr">{{val}}
        <button v-on:click='dela(index)'>删除</button>
        </li>
    </ul>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#itany',
        data:{
            arr:['香蕉','橘子','鸭梨','苹果'],
            add:''
        },
        methods:{
            mou:function(){
                this.arr.push(this.add);
                this.add=''
            },
            dela:function(ind){
                this.arr.splice(ind,1)
            }
        }
    })
</script>