<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../../js_script/vue-2.3.0.js"></script>
<script src="./template/temp_1.js"></script>
</head>
<body>
<div id="app">
<div>
{{condition}}
</div>
<div>
0<input type="radio" v-model="condition" value="0" /> 1
<input type="radio" v-model="condition" value="1" />
</div>
<hr />
<breed-table :breeds="breeds">
<div>
5555
</div>
</breed-table>
</div>
<script>
new Vue({
el: '#app',
data: {
condition: "0",
breeds: [{
name: 'Persian',
colour: 'orange',
affection: 3,
shedding: 5
}, {
name: 'Siberian',
colour: 'blue',
affection: 5,
shedding: 4
}, {
name: 'Bombay',
colour: 'black',
affection: 4,
shedding: 2
}]
},
components: {
breedTable: breedTable
}
});
</script>
</body>
</html>
////////////////////////////////////////////////////////////////////////////////////////////////
/temp_1.js>>
var breedTable = {
functional: true,
render: function(ch, context) {
debugger;
console.dir(arguments);
var result;
if(Number(context.parent.condition)){
result = ch(template_2, context.data, context.children);
}else{
result = ch(template_1, context.data, context.children);
}
return result;
}
}
/* ============================================================= */
var template_1 = {
props: ['breeds'],
template:'<div>template_1</div>'
};
var template_2 = {
props: ['breeds'],
template:'<div>template_2</div>'
};
