<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" 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>0</span>)</h3>
<vote-content></vote-content>
<vote-button></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">支持</button>
<button type="button" class="btn btn-danger">反对</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 {}
}
}
const MyVote={
template:'#MyVoteTemplate',
props:['title'],
data(){
return {}
},
components:{
VoteContent,
VoteButton
},
mounted(){
//基于属性传递过来的值，只能获取使用，不能再子组件中修改(修改够会有对应得效果，子组件会重新渲染，但是控制台会报错)
// this.title='Aaa'
}
}
let vm=new Vue({
el:'#app',
data:{
voteList:[
{id:1,title:'张三'},
{id:2,title:'李四'}
]
},
components:{
MyVote
}
})
</script>
</html>
