**
//业务逻辑
//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>
1839
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
