<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
.container{
padding:10px;
border:1px solid red;
width:300px;
box-sizing:border-box;
margin:20px auto;
}
.container h3{
font-size:16px;
line-height:40px;
font-weight:bold;
border-bottom:1px dashed #AAA;
}
</style>
</head>
<body>
<div id="app">
<my-vote v-for="item in voteList" :title="item.title"></my-vote>
</div>
<template id="MyVoteTemplate">
<div class="container">
<h3><span v-text="title"></span>(<span>{{num}}</span>)</h3>
<vote-content></vote-content>
<vote-button @changepant="changePant"></vote-button>
</div>
</template>
<template id="VoteContentTemplate">
<div class="content">
<p>支持人数:<span>0</span></p>
<p>反对人数:<span>0</span></p>
<p>支持率:<span>0%</span></p>
</div>
</template>
<template id="VoteButtonTemplate">
<div class="footer">
<button type="button" class="btn btn-primary" @click="handle('support')">支持</button>
<button type="button" class="btn btn-danger" @click="handle('oppose')">反对</button>
</div>
</template>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
const VoteContent={
template:'#VoteContentTemplate',
data(){
return {}
}
}
const VoteButton={
template:'#VoteButtonTemplate',
data(){
return {}
},
methods:{
handle(type){
this.$emit('changepant',type)
}
}
}
const MyVote={
template:'#MyVoteTemplate',
props:['title'],
data(){
return {
num:0
? ? ? ? ? ? }
},
components:{
VoteContent,
VoteButton
? ? ? ? },
methods:{
changePant(type){
if (type==='support'){
this.num++
}else if(type==='oppose'){
this.num--
}
}
},
mounted(){
//基于属性传递过来的值，只能获取使用，不能再子组件中修改(修改够会有对应得效果，子组件会重新渲染，但是控制台会报错)
// this.title='Aaa'
? ? ? ? }
}
let vm=new Vue({
el:'#app',
data:{
voteList:[
{id:1,title:'张三'},
{id:2,title:'李四'}
],
},
components:{
MyVote
? ? ? ? },
mounted(){
setTimeout(()=>{
this.voteList=this.voteList.map((item)=>{
if (item.id===1){
item.title='张三是个傻子';
}
return item
})
},1000)
}
})
</script>
</html>
