v-bind:设置元素的属性(如:src,title,class) v-bind:属性名=表达式(v-bind:src=“imgSrc”) v-bind可以省略，只保留’:属性名’(:title=“imgTitle”) 动态增删class建议使用对象的方式
例：
<div id="app-3"> <img v-bind:src="imgSrc" :title="imgTitle+'哟'" :class="isActive?'active':''"/><!-- v-bind可省略，':属性名' --> <br /> <img :src="imgSrc" @click="toggleActive" :class="{active:isActive}"/> <!-- active是否生效，取决于isActive的值 --> </div> var app3 = new Vue({ el:"#app-3", data:{ imgSrc:"resource/COREi7.jpg", imgTitle:"酷睿i7", isActive:false, }, methods:{ toggleActive:function(){ this.isActive = !this.isActive; } } })Demo:轮播图(图片切换) 列表数据使用数组保存 v-bind指令可以设置元素属性，比如src v-show和v-if都可以切换元素的显示状态 频繁切换使用v-show
<div id="mask"> <div class="center"> <h2 class="title">Intel处理器</h2> </div> <!-- 图片 --> <img :src="imgArr[index]" /> <!-- 左箭头 --> <a href="javascript:void(0)" v-show="index != 0" @click="prev"> <img src="resource/left.jpg"/> </a> <!-- 右箭头 --> <a href="javascript:void(0)" v-show="index < imgArr.length-1" @click="next"> <img src="resource/right.jpg" /> </a> </div> var app = new Vue({ el:"#mask", data:{ imgArr:[ "./resource/COREi7.jpg", "./resource/COREi5.jpg", "./resource/COREi3.jpg", ], index:0, }, methods:{ prev:function(){ this.index--; }, next:function(){ this.index++; }, } })