超简单的Vue实用例子（持续更新中）

时间 2019-11-06

标签简单 vue 实用例子持续更新繁體版

原文原文链接

1. 实现搜索计算

1.1 搜索逻辑描述

点击搜索项显示在已选结果中，每一行只能选一个

选中结果按照从上到下的顺序从左至右显示

已选结果点击x,删除已选结果，删除已选效果

1.2 实现思路：

渲染出搜索列表，并添加相应样式
存储选中结果，为了保证数据，采用搜索列表的索引值为key值
交互数据同步

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>
			ul{
				background:#f0fbf9;
				padding: 0px;
				margin: 0px;
			}
			ul li{
				list-style: none;
				padding: 10px 40px;
			}
			ul li a {
				padding: 0px 10px;
			}
			.active{
				background: #6fc6be;
			}
			.choose-box{
				height: 40px;
				padding-left: 40px;
				line-height: 40px;
				background: #dfebea;
			}
			.choose-box span {
				background: #ddd;
				padding: 2px;
				border: 1px solid #6fc6be;
				margin-left: 10px;
				background: transparent;
			}
			.choose-box span a{
				background: #6fc6be;
				padding: 0px 6px;
			}
		</style>
	</head>
	<script>
		var dataList=[{
			typeName:'性别',
			contentList:['男','女','不限']
		},{
			typeName:'爱好',
			contentList:['读书','跑步','游泳','篮球']
		},{
			typeName:'技术',
			contentList:['头发特长','Java','React','Vue']
		}]
		
	</script>
	
	<body>
		<div id='app'>
			<div  class='choose-box' >
				已选结果
				<span v-for="item,key in choose" @click="remove(key)">
				{{item}}
				<a>x</a>
				</span>
			</div>
			<ul>
				<li v-for="data,index in dataList">
				{{data.typeName}}：
					<a  herf='javascript;'
						v-for="item,i in data.contentList"
						@click="addChoose(item,index,i)"
						v-bind:class="{active:data.index===i}"
						>{{item}}</a>
						
				</li>
			</ul>
		</div>
		<script>
			//选中状态data数据
			dataList.forEach(item=>item.index=-1)
			let vm =new Vue({
				el:'#app',
				data:{
					dataList,
					choose:{}
				},
				methods:{
					addChoose(item,index,i){
						this.$set(this.choose,index,item)
						this.dataList[index].index=i
						console.log(this.choose)
					},
					remove(key){
						this.$delete(this.choose,key)
						this.dataList[key].index=-1
					}
					
				}
			})
		</script>
	</body>
</html>


复制代码

2.实现全选功能

2.1 全选功能描述

点击全选时，全部子项选中，取消全选时，全部子项取消选中

在全选状态下，取消选中其中一个子项，取消全选，所有子项选中时，全选选中

2.2 实现思路

单选按钮，及全选按钮使用v-model进行数据绑定
全选按钮根据计算获取，使用Vue的computed属性设置和获取全选按钮的状态

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src='./src/vue.js'></script>
		<title>全选功能</title>
		<script>
			var data=[
				{checked:true,name:'JAVA'},
				{checked:true,name:'React'},
				{checked:true,name:'Vue'},
				{checked:true,name:'node'},
				]
		</script>
	</head>
	<body>
		<div id='app'>
			<p><input type="checkbox" v-model="checkedAll"/>全选</p>
			<p v-for="item in data">
				<input type="checkbox" v-model="item.checked"/>
				{{item.name}}
			</p>
		</div>
		<script>
			var vm=new Vue({
				el:'#app',
				data:{
					data
				},
				computed:{
					checkedAll:{
						get(){//获取全选状态
							return data.every(one=>one.checked)
						},
						set(newValue){//设置全选状态
							 this.data.forEach(item=> item.checked=newValue)
						}
					},
				}
			})
			
		</script>
	</body>
</html>


复制代码