<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>
