2018-09-11第二节vue.js指令 v-if/v-sho

1.v-if / v-show控制元素的显示隐藏
案例一：

body部分：

<div id="itany">

   <p>v-show此内容可见</p>
   <p v-show=!see>v-show此内容不可见</p>   <!--      display:none-->
   <p>v-if此内容可见</p>
   <p v-if=!see>v-if此内容不可见</p>      <!--      visiblity:hidden-->
</div>

js部分：

<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#itany',
        data:{
            see:true
        }
    })
</script>

效果图：

v-if.png

案例二、点击隐藏显示
css部分：

 <style>

    p{
        width:100px;
        height:100px;
        background:red;
    }
</style>

body部分：

  <div id="itany">

   <button v-on:click='alt'>隐藏/显示</button>
   <p v-show=see></p>
 </div>

js部分

<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#itany',
        data:{
            see:true
        },
        methods:{
            alt:function(){
                this.see=!this.see
            }
        }
    })
</script>

v-show.png

2.v-bind 绑定属性 v-bind:属性='值'，针对图片
案例一：
body部分：

      <div id="itany">

   <img v-bind:src="url" alt="" @click='alt'>
  </div>

js部分：

<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#itany',
        data:{
            url:'img/1.jpg',
            hef:'img/2.jpg',
            al:'img/3.jpg'
        },
        methods:{
            alt:function(){
                this.url=this.hef
                this.hef=this.al
                this.al=this.url
            }
        }
    })
</script>

效果图：

bind1.jpg

案例二点击切换图片：
body部分：

  <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>

js部分：

<script src="js/vue.js"></script>
<script>
    
    new Vue({
        el:'#itany',
        data:{
            url:'img/1.jpg',
            arr:['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg']
        },
        methods:{
            chg:function(ind){
                this.url=this.arr[ind]
            }
        }
    })
</script>

效果图：

bind2.jpg

二、display:none与visibility:hidden的区别

display:none和visibility:hidden都能把网页上某个元素隐藏起来，

两者的区别:

display:none ---对象在页面上彻底消失，不在文档流中占位，浏览器也不会解析该元素

visiblility:hidden---视觉上消失，在页面中所占的空间没有改变，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素

三、添加删除水果列表案例

     <div id="itany">

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

效果图：

水果列表.png