想要实现的效果
- 通过v-for展示列表数据
- 点击每一项列表,加上蓝色背景颜色 ,通过
:class="{active: current == index}"
- 选中当前项,增加蓝色背景,点击添加按钮,会在下方新增一条列表,内容就是当前项的值,然后当前项蓝色背景取消
单页面Vue应用构建步骤
先随便建一个文件夹
在这个文件夹内新建一个vue文件,比如叫test.vue
命令行进入这个文件夹,输入 vue serve test.vue
可能会提示下图,没关系,是因为没有安装什么东西,按着提示安装即可,然后再输入 vue serve test.vue
vue serve test.vue
执行成功之后,会提示如下图
复制这个网址 http://localhost:8080/,在浏览器中打开即可,效果如下图
完整代码
<template>
<div>
<ul>
<li v-for="(item,index) in list"
@click="choose(index)"
:class="{active: current == index && current !== ''}"
:key="index">{{item}}
</li>
</ul>
<button @click="add()">添加</button>
<ul>
<li v-for="(item,index) in target"
:key="index">{{item}}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'test',
data() {
return{
current: '', //data内部的return内部每一行要写逗号分隔
list: [1,2,3,4,5,6,7,8,9], //data内部的return内部每一行要写逗号分隔
target: [] //data内部的return内部每一行要写逗号分隔
}
},
methods: {
choose(index){
this.current = index
},
add(){
if(this.current === ''){return} //methods内部的add()方法内部每一行不用写逗号分隔
this.target.push(this.list[this.current]) //methods内部的add()方法内部每一行不用写逗号分隔
this.current = '' //methods内部的add()方法内部每一行不用写逗号分隔
}
}
}
</script>
<style>
.active{
background-color: blue
}
</style>
页面效果
点击添加
按钮后