vue-10 demo1

本文主要是介绍vue-10 demo1，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在这里插入图片描述
**
//业务逻辑
//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>