vue(9)组件

痛定思痛。 2022-01-10 13:03 123阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>vue</title>
    	<style type="text/css">
    		div.product{ 
    			border: 1px solid gray;
    			width: 200px;
    			margin:20px;
    			float:left;
    			cursor:pointer;
    		}
    		div.product:hover{ 
    			border:1px solid #c40000;
    		}
    		div.price{ 
    			color:#c40000;
    			font-weight:bold;
    			font-size:1.2em;
    			margin:10px;
    		}
    		div.productName{ 
    			color:gray;
    			font-size:0.8em;
    			margin:10px;
    		}
    		div.sale{ 
    			float:left;
    			width:100px;
    			border:1px solid lightgray;
    			border-width:1px 0px 0px 0px;
    			color:gray;
    			font-size:0.8em;
    			padding-left:10px;
    		}
    		div.review{ 
    			overflow:hidden;
    			border:1px solid lightgray;
    			border-width:1px 0px 0px 1px;
    			color: gray;
    			font-size:0.8em;
    			padding-left:10px;
    		}
    	</style>
    </head>
    <body>
    	<script src="vue.min.js"></script>
    
    	<div id="template" style="display:none;">
    		<div class="product" v-on:click="increaseSale">
    			<div class="price">
    				￥{ { product.price}}
    			</div>
    			<div class="productName">
    				{ { product.name}}
    			</div>
    			<div class="sale">
    				月成交{ { product.sale}}笔
    			</div>
    			<div class="review">
    				评价{ { product.review}}
    			</div>
    		</div>
    	</div>
    
    	<div id="div1">
    		<product v-for="item in products" v-bind:product="item"></product>
    	</div>
    
    	<script type="text/javascript">
    		var templateDiv = document.getElementById("template").innerHTML;
    		var templateObject = { 
    			props:['product'],
    			template:templateDiv,
    			methods:{ 
    				increaseSale:function(){ 
    					this.product.sale = parseInt(this.product.sale);
    					this.product.sale++;
    					this.$emit('increment');
    				}
    			}
    		}
    
    		Vue.component('product',templateObject)
    
    		new Vue({ 
    			el:"#div1",
    			data:{ 
    				products:[
    						{ "name":"MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮","sale":"18","price":"889","review":"5"},
    						{ "name":"MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮","sale":"18","price":"889","review":"5"},
    						{ "name":"MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮","sale":"18","price":"889","review":"5"},
    						]
    			}
    		})
    	</script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5MzQ1MQ_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5MzQ1MQ_size_16_color_FFFFFF_t_70]: /images/20220110/675002593680428e91cc202bd3c70a39.png