1耕魄、配合模板:
(1) template:'<h2 @click="change">標(biāo)題2->{{msg}}</h2>'
(2) 單獨(dú)放到某個(gè)地方
a) type="x-template" x-template可以隨意命名厨诸,但是不能沒有type
<script type="x-template" id="aaa">
<h2 @click="change">標(biāo)題2->{{msg}}</h2>
</script>
b) <template id="aaa">
<h1>標(biāo)題1</h1>
<ul>
<li v-for="val in arr">
{{val}}
</li>
</ul>
</template>
2、動(dòng)態(tài)組件:定義一個(gè)元素,動(dòng)態(tài)更新各種組件
<component :is="組件名稱"></component>
例子:
<body>
<div class="box">
<input type="button" value="體育" @click="sSign='ty'" />
<input type="button" value="音樂" @click="sSign='yy'"/>
<component :is="sSign"></component>
</div>
<script src="bower_components/vue/dist/vue.js"></script>
<script>
var vm=new Vue({
el:".box",
data:{
sSign:"ty"
},
components:{
"ty":{
template:"<h3>這是體育新聞</h3>"
},
"yy":{
template:"<h3>這是音樂新聞</h3>"
}
}
})
</script>
</body>