Vue 页面动态添加标签demo
<template>
<div class="">
<button @click="createNode">
增加条件
</button>
<div v-for="(v, i) in addRankData" v-bind:key="i">
{{ v }}
<select
class="add-style"
v-model="v[0]"
>
<option
v-for="option in addList"
:key="option.value"
:id="option.value"
:name="option.name"
>
</option>
</select>
<div class="sort-style2">
<input class="add-style" v-model="v[2]"></input>
<button
@click="del()"
v-show="v === addRankData[addRankData.length - 1] ? true : false"
>
X
</button>
</div>
</div>
</div>
</template>
<script>
export default {
name: "",
data() {
return {
addList: [
{ name: "参数0", value: 0 },
{ name: "参数1", value: 1 },
],
addRankData: [],
};
},
components: {},
methods: {
del() {
this.addRankData.pop();
},
createNode() {
this.addRankData.push([]);
},
},
};
</script>
<style lang=''>
.add-style {
width: 80px;
}
.sort-style2 {
margin-top: -32px;
margin-left: 192px;
}
</style>