超簡單的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>


複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。