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

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

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

body部分：

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

可见
不可见
v-if不可见

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

body部分

     点击隐藏
     

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部分:

   
   

       
{{arrs[index]}}
   

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]
            }
        }
    })