vue.js - vue列表渲染问题
本文介绍了vue.js - vue列表渲染问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
一个Vue列表渲染,代码如下,在网页上却没有渲染出来,有些不太明白,求指导
<html>
<head>
<script src="http://cdn.bootcss.com/vue/2.1.10/vue.min.js"></script>
</head>
<body>
<ul id="example-1">
<examp></examp>
</ul>
<script type="text/javascript">
Vue.component('examp',{
template:'<li v-for="item in items">{{ item.message }}</li>',
data: function(){
return {
items:[{message: 'Foo' },{message: 'Bar' }]
}
}
})
new Vue({
el: '#example-1'
})
</script>
</body>
</html> 解决方案
v-for后，你的组件就会多个li元素，也就产生了多个根节点，Vue2.0是不允许的，考虑如下修改：
<html>
<head>
<script src="http://cdn.bootcss.com/vue/2.1.10/vue.min.js"></script>
</head>
<body>
<div id="example-1">
<ul is="examp"></ul>
</div>
<script type="text/javascript">
Vue.component('examp', {
template: '<ul><li v-for="item in items">{{item.message}}</li></ul>',
data: function () {
return {
items: [{
message: 'Foo'
}, {
message: 'Bar'
}]
}
}
})
new Vue({
el: '#example-1'
})
</script>
</body>
</html>这篇关于vue.js - vue列表渲染问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
