VUE v-if 和 v-for 的使用示例 VUE根据下标改变图片路径
QQ技术交流群173683866 526474645 欢迎加入交流讨论,打广告的一律飞机票v-if 和 v-else v-for<div class="" v-for="(item,index) in [1,1,1,1,1,1,1,1,1,1]"><img v-if="helpeds==0" class="tou1" :style="{'margin-right...
·
QQ技术交流群 173683866 526474645 欢迎加入交流讨论,打广告的一律飞机票
v-if 和 v-else v-for
<div class="" v-for="(item,index) in [1,1,1,1,1,1,1,1,1,1]">
<img v-if="helpeds==0" class="tou1" :style="{'margin-right':(index==2||index==5?'1em':'0.2em')}" src="img/tou.png" />
<img v-else class="tou1" :style="{'margin-right':(index==2||index==5?'1em':'0.2em')}" :src="'img/tou'+(index+1)+'.png'" />
</div>
VUE 标签的属性绑定 (不需要添加大括号)
示例
:src="'img/tou'+(index+1)+'.png'"
:style="{'margin-right':(index==2||index==5?'1em':'0.2em')}"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style>
.active {
width: 100px;
height: 100px;
background: green;
}
.text-danger {
background: red;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="classObject"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
classObject: {
active: true,
'text-danger': true
}
}
})
</script>
</body>
</html>
更多推荐
已为社区贡献38条内容
所有评论(0)