列表demo

demo.vue

@@ -0,0 +1,49 @@
+<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>