<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
.clr { background-color:pink; }
.oneStyle { color:blue; font-size: 33px;}
.twoStyle { font-size: 33px;}
</style>
<script src="../../vue.js"></script>
</head>
<ul id="app">
<li>
{{b}}
</li>
<my-template v-if="a" :a="a.a" :b="a.b"></my-template>
</ul>
<script>
Vue.component("myTemplate", {
template: '<ul><li>{{b}}</li><my-template v-if="a" :a="a.a" :b="a.b"></my-template></ul>',
props: ["a", "b"]
})
var data = {
a: {
a: {
a: 0,
b: 3
},
b: 2
},
b: 1
}
var vm = new Vue({
el: '#app',
data: data,
methods: {
}
});
</script>
</body>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
.clr { background-color:pink; }
.oneStyle { color:blue; font-size: 33px;}
.twoStyle { font-size: 33px;}
</style>
<script src="../../vue.js"></script>
</head>
<ul id="app">
<li>
{{b}}
</li>
<my-template v-if="a" :a="a.a" :b="a.b"></my-template>
</ul>
<script>
Vue.component("myTemplate", {
template: '<ul><li>{{b}}</li><my-template v-if="a" :a="a.a" :b="a.b"></my-template></ul>',
props: ["a", "b"]
})
var data = {
a: {
a: {
a: 0,
b: 3
},
b: 2
},
b: 1
}
var vm = new Vue({
el: '#app',
data: data,
methods: {
}
});
</script>
</body>
</html>
递归vue
- 1
- 2
- 3
- 2