**
//業務邏輯
//1 定義dataList數組變量用於存儲上方ul的顯示的數據
//2 當點擊上方的li的時候改變背景顏色，實現思路爲：定義li.activate樣式並設置背景顏色，
// 定義一個標識變量（sign）,用於記錄標識li數據的索引，
// 每次點擊li時（給li添加點擊事件），則將該li數據索引賦值給這個標識變量（sign），
// 判斷當標識變量（sign）===index(li索引)時，將當前li的class設置爲activate
//3 點擊添加按鈕將上方選中的li添加到下方的ul中**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
//業務邏輯
//1 定義dataList數組變量用於存儲上方ul的顯示的數據
//2 當點擊上方的li的時候改變背景顏色，實現思路爲：定義li.activate樣式並設置背景顏色，
// 定義一個標識變量（sign）,用於記錄標識li數據的索引，
// 每次點擊li時（給li添加點擊事件），則將該li數據索引賦值給這個標識變量（sign），
// 判斷當標識變量（sign）===index(li索引)時，將當前li的class設置爲activate
//3 點擊添加按鈕將上方選中的li添加到下方的ul中-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style type="text/css">
li.activate {
background-color: green;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in dataList" :key="index" @click="choose(index)"
:class="{activate:sign==index&&sign!=''}">{{item}}
</li>
</ul>
<button @click="add()">添加</button>
<ul>
<li v-for="(item,index) in newDataList">{{item}}</li>
</ul>
</div>
<script>
var app = new Vue({
el: "#app",
data() {
return {
sign: "",
dataList: [3, 4, 54, 8, 2],
newDataList: []
}
},
methods: {
choose(index) {
this.sign = index;
},
add() {
if (this.sign != '') {
this.newDataList.push(this.dataList[this.sign])
}
}
}
});
</script>
</body>
</html>