<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<child>
<template slot-scope="props">
<li>{{props.item}}</li>
</template>
</child>
</div>
</body>
<script>
Vue.component('child',{
data:function(){
return{
list:[1,2,3,4]
}
},
template:`
<div>
<ul>
<slot v-for="item of list" :item=item></slot>
</ul>
</div>
`
})//slot作用域插槽用slot来定义，目标标签中用slot-scope来接收循环数据
var app=new Vue({
el:'#app',
})
</script>
</html>
下面这个例子来用v-if判断值，用v-once存放内存优化静态显示
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<child-one v-if="type==='child-one'"></child-one><!--用v-if来判断type的值-->
<child-two v-if="type==='child-two'"></child-two>
<button @click="handleBtnClick">change</button>
</div>
</body>
<script>
Vue.component('child-one',{
template:'<div v-once>child-one</div>'//v-once放到内存里面，提高静态内存的效率
})
Vue.component('child-two',{
template:'<div v-once>child-two</div>'
})
var app=new Vue({
el:'#app',
data:{
type:'child-one'//命名type的值
},
methods:{
handleBtnClick:function(){
this.type=this.type==='child-one'?'child-two':'child-one'//用三元运算符来改变type的值
}
}
})
</script>
</html>