数据格式如下:
data:{
id:1,
name:tom,
children:{
id:1-1,
name:tom1-1
children:[
{ id:1-1-1,
name:tom1-1-1 },
{ id:1-1-2,
name:tom1-1-2 },
]
},
id:2,
name:licy,
children:{
id:2-1,
name:licy2-1
children:[
{ id:2-1-1,
name:licy2-1-1 },
{ id:2-1-2,
name:licy2-1-2 },
]
}
}
如何在vue2中的绑定显示出来?
不知道你这个问题是否已经解决, 如果还没有解决的话:比如通过Vue实例中的data绑定元素的src和href,代码如下∶
<div id="app">
<!-- v-bind 给src 赋值 -->
<img v-bind:src="imageUrl" alt="">
<!-- v-bind 给href 赋值 -->
<a v-bind:href="aHref">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello Vue',
imageUrl: 'https://img11.360buyimg.com/seckillcms/s140x140_jfs/t1/187467/26/6629/80813/60ba0541Ef4868511/1f190ae8e1af3920.jpg.webp',
aHref: 'http://baidu.com'
}
})
</script>
首先,你需要实例化一个Vue实例,并且定义一个数据对象:
const app = new Vue({
el: '#app',
data: {
id: 'test',
src: '路径/to/image.jpg'
}
})
然后,你可以使用v-bind指令(也可以简写为冒号)来将数据绑定到标签的属性上。例如,将id属性绑定给p标签的id属性,将src属性绑定给img标签的src属性:
<div id="app">
<p :id="id">This is a paragraph.</p>
<img :src="src" alt="Image">
</div>
最后,将上述代码放在Vue实例所在的HTML文件中,确保Vue.js文件已正确引入。
这样,当Vue实例加载时,数据绑定将自动应用于相应的标签属性,从而显示出数据的内容。