如何替换 vue.js 2 中的元素?
How can I replace element in vue.js 2?
我的组件 vue 是这样的:
<template>
<div>
<ul class="list-inline list-photo">
<template v-for="item in items">
<li>
<a href="javascript:;" class="thumbnail thumbnail-upload"
:title="trans('store.add.img.button')" @click="addPhoto">
<span class="fa fa-plus fa-2x"></span>
</a>
</li>
</template>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [1, 2, 3, 4, 5]
}
},
methods: {
addPhoto() {
// change element clicked
}
}
}
</script>
如果点击标签li中的link,我想将元素li替换成这样:
<li>
<div class="thumbnail">
<img src="https://myshop.co.id/img/no-image.jpg" alt="">
<a href="javascript:;" class="thumbnail-check"><span class="fa fa-check-circle"></span></a>
</div>
</li>
因此,如果我单击第二个元素 li,它将替换第二个元素 li
我该怎么做?
只需使用 v-if
/ v-else
切换元素,跟踪对象或类似物中被点击的元素
export default {
data() {
return {
items: [1, 2, 3, 4, 5],
clicked: [] // using an array because your items are numeric
}
},
methods: {
addPhoto(item) {
this.$set(this.clicked, item, true)
}
}
}
并在您的模板中
<li v-for="item in items">
<div class="thumbnail" v-if="clicked[item]">
<img src="https://myshop.co.id/img/no-image.jpg" alt="">
<a href="javascript:;" class="thumbnail-check"><span class="fa fa-check-circle"></span></a>
</div>
<a v-else href="javascript:;" class="thumbnail thumbnail-upload"
:title="trans('store.add.img.button')" @click="addPhoto(item)">
<span class="fa fa-plus fa-2x"></span>
</a>
</li>
我的组件 vue 是这样的:
<template>
<div>
<ul class="list-inline list-photo">
<template v-for="item in items">
<li>
<a href="javascript:;" class="thumbnail thumbnail-upload"
:title="trans('store.add.img.button')" @click="addPhoto">
<span class="fa fa-plus fa-2x"></span>
</a>
</li>
</template>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [1, 2, 3, 4, 5]
}
},
methods: {
addPhoto() {
// change element clicked
}
}
}
</script>
如果点击标签li中的link,我想将元素li替换成这样:
<li>
<div class="thumbnail">
<img src="https://myshop.co.id/img/no-image.jpg" alt="">
<a href="javascript:;" class="thumbnail-check"><span class="fa fa-check-circle"></span></a>
</div>
</li>
因此,如果我单击第二个元素 li,它将替换第二个元素 li
我该怎么做?
只需使用 v-if
/ v-else
切换元素,跟踪对象或类似物中被点击的元素
export default {
data() {
return {
items: [1, 2, 3, 4, 5],
clicked: [] // using an array because your items are numeric
}
},
methods: {
addPhoto(item) {
this.$set(this.clicked, item, true)
}
}
}
并在您的模板中
<li v-for="item in items">
<div class="thumbnail" v-if="clicked[item]">
<img src="https://myshop.co.id/img/no-image.jpg" alt="">
<a href="javascript:;" class="thumbnail-check"><span class="fa fa-check-circle"></span></a>
</div>
<a v-else href="javascript:;" class="thumbnail thumbnail-upload"
:title="trans('store.add.img.button')" @click="addPhoto(item)">
<span class="fa fa-plus fa-2x"></span>
</a>
</li>