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
            }
        }
  })
Vue: v-bind v-show&v-if_第1张图片
QQ截图20180911174245.png

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

效果:
Vue: v-bind v-show&v-if_第2张图片
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]
            }
        }
    })

你可能感兴趣的