isShow:true
}
});
render这样写
//HTML
<div id="app">
<vv-isshow :show="isShow"><slot>我被你发现啦3！！！</slot></vv-isshow>
</div>
//js
//组件形式
Vue.component('vv-isshow', {
props:{
show:{
type: Boolean,
default: true
}
},
render:function(h){
if(this.show ) return h('div',this.$slots.default);
},
});
var vm = new Vue({
el: "#app",
data: {
isShow:true
}
});列表渲染
之前是这样写的，而且v-for 时template内必须被一个标签包裹
//HTML
<div id="app">
<vv-aside v-bind:list="list"></vv-aside>
</div>
//js
//组件形式
Vue.component('vv-aside', {
props:['list'],
methods:{
handelClick(item){
console.log(item);
}
},
template:'<div>
<div v-for="item in list" @click="handelClick(item)" :class="{odd:item.odd}">{{item.txt}}</div>
</div>',
//template:'<div v-for="item in list" @click="handelClick(item)" :class="{odd:item.odd}">{{item.txt}}</div>',错误
});
var vm = new Vue({
el: "#app",
data: {
list: [{
id: 1,
txt: 'javaScript',
odd: true
}, {
id: 2,
txt: 'Vue',
odd: false
}, {
id: 3,
txt: 'React',
odd: true
}] }
});render这样写
//HTML
<div id="app">
<vv-aside v-bind:list="list"></vv-aside>
</div>
//js
//侧边栏
Vue.component('vv-aside', {
render: function(h) {
var _this = this,
ayy = this.list.map((v) => {
return h('div', {
'class': {
odd: v.odd
},
attrs: {
title: v.txt
},
on: {
click: function() {
return _this.handelClick(v);
}
}
}, v.txt);
});
return h('div', ayy); },
props: {
list: {
type: Array,
default: () => {
return this.list || [];
}
}
},
methods: {
handelClick: function(item) {
console.log(item, "item");
}
}
});
var vm = new Vue({
el: "#app",
data: {
list: [{
id: 1,
txt: 'javaScript',
odd: true
}, {
id: 2,
txt: 'Vue',
odd: false
}, {
