50 lines
1.1 KiB
Vue
50 lines
1.1 KiB
Vue
<template>
|
|
<div>
|
|
<ul>
|
|
<li v-for="(item,index) in lists"
|
|
@click="choose(index)"
|
|
:class="{active: index == current && current!== ''}"
|
|
:key="index">
|
|
{{item}}
|
|
</li>
|
|
</ul>
|
|
<button type="button" @click="add()">选择</button>
|
|
<ul>
|
|
<li v-for="(item,index) in target"
|
|
:key="index">
|
|
{{item}}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "demo.vue",
|
|
methods: {
|
|
choose(index) {
|
|
this.current = index
|
|
// console.log(index)
|
|
},
|
|
add() {
|
|
if (this.current === '') return
|
|
this.target.push(this.lists[this.current])
|
|
this.current = ''
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
current: '',
|
|
lists: [1, 2, 3, 4, 5, 6, 7, 8, 9],
|
|
target: []
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
li.active {
|
|
background: beige;
|
|
}
|
|
</style>
|