day67作业 


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.active {
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			 <button @click="tvs_click">{{h1}}</button>
			 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			 <button @click="ph_click">{{h2}}</button>
			 <hr>
			 
			 <div v-for="k,v,i in ad_data">
				 <div v-if="v == 'tvs'" v-show="tv_show">
					 <div v-for="k,i in k">
						 <tag1 :k="k" :i="i" @action1="fn1"></tag1>
					 </div>
				 </div>
				 <div v-if="v == 'phones'" v-show="ph_show">
				 	<div v-for="k,i in k">
						<tag1 :k="k" :i="i" @action2="fn2"></tag1>
					</div>
				 </div>
			 </div>
			 
			 <h2>用户选择的物品是：{{shopping}}</h2>
			 
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

		<script>
			
			let	tag1 = {
				props:['k','i'],
				template:
				`
				<table border="1px" cellpadding="1px">
					
					<tbody >
						<tr @click="is_select" :class="{active:is_selected}">
							<input type="checkbox" v-model="t1">{{k.title}}
						</tr>
					</tbody>
				</table>
				`,
				data(){
					return {
						is_selected:false,
						t1:[],
					}
				},
				methods:{
					is_select(){
						console.log('点击事件被点击了',this.t1)
						if (this.is_selected){
							this.is_selected = false
							return;
						};
						this.is_selected = true;
						this.$emit('action1',this.t1)
					}
				}
			}
			
			// 广告数据
			let ad_data = {
			 	tvs : [
			 		{title: 'tv1'},
			 		{title: 'tv2'},
			 		{title: 'tv3'},
			 		{title: 'tv4'},
			 	],
			 	phones : [
			 		{title: 'phone1'},
			 		{title: 'phone2'},
			 		{title: 'phone3'},
			 		{title: 'phone4'},
			 	]
			 }
			 
			
			 
			let app = new Vue({
				el: '#app',
				data: {
					h1:'电视',
					h2:'手机',
					ad_data,
					tv_show:'',
					ph_show:'',
					shopping:'未选中任何广告',
				},
				components:{
					tag1,
				},
				methods:{
					tvs_click(){
						if (this.tv_show){
							this.tv_show = false
							return
						}
						console.log('tvs_click被点击了')
						this.tv_show = true
					},
					ph_click(){
						if (this.ph_show){
							this.ph_show = false
							return
						}
						console.log('ph_click被点击了')
						this.ph_show = true
					},
					fn1(a,b){
						console.log(a,b)
					},
					fn2(a,b){
						console.log(a,b)
					}
				}
			})
		</script>
	</body>
</html>
posted @ 2019-12-18 21:59  GeminiMp  阅读(45)  评论(0)    收藏  举报