Vue: v-bind v-show&v-if

一：v-bind 将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致

这个案例是点击当前图片会更换到另一张，更改的是图片的src属性

body部分：

<div id="app">
    <img v-bind:src="s" alt="" v-on:click='dj'>
</div>

js部分

 new Vue({
     el:'#app',
     data:{
         s:'1.jpg',
         h:'2.jpg'
     },
     methods:{
         dj:function(){
             this.s=this.h
         }
     }
   })

二：v-show&v-if控制切换一个元素是否显示
v-show:display:none v-if:visibility:hidden

<p v-show=see>可见</p>
<p v-show=!see>不可见</p>
<p v-if=!see>v-if不可见</p>

下面的案例讲的是点击这个button按钮隐藏红块，再点击显示红块，主要是判断true还是false

body部分

<div id="app">
     <button v-on:click='yx'>点击隐藏</button>
     <div id="color" v-show=see></div>
</div>

js部分：

new Vue({
        el:'#app',
        data:{
            see:true
        },
        methods:{
            yx:function(){
                this.see=!this.see
            }
        }
  })

QQ截图20180911174245.png

练习：点击下面的数字更换对应的图片应用了Vue中的v-bind、v-on
图片的路径是一个变量，当点击下面的数字时，当前arr的下标就是l,实现点击换图片的效果

效果：

QQ截图20180911174552.png

body部分:

<div id="app">
   <img v-bind:src="l" alt="">
   <ul>
       <li v-on:click='ht(index)' v-for='(value,index) in arr'>{{arrs[index]}}</li>
   </ul>
</div>

js部分：

new Vue({
        el:'#app',
        data:{
            arr:['1.jpg','2.jpg','3.jpg','4.jpg','5.jpg'],
            arrs:['1','2','3','4','5'],
            l:'1.jpg'
        },
        methods:{
            ht:function(ind){
                this.l=this.arr[ind]
            }
        }
    })

Vue: v-bind v-show&v-if

推荐阅读更多精彩内容