<body>
</student>
</div>
<div id="myVie">
<stu
v-for="stu in stuVue"
v-bind:stulist="stu"
v-bind:key="stu.id">
</stu>
</div>
</body>
<script src="${pageContext.request.contextPath}/js/vue.js"></script>
<script type="text/javascript">
//必须确保Vue。component先加载出来
Vue.component('student',{
props:['data'],
template: '<div><span style="color:red">{{data.id}}</span><span style="color:green">{{data.name}}</span><span style="color:blue">{{data.height}}</span></div>'
});
var myViewModel = new Vue({
el:'#myView',
data:myModel
});
Vue.component('stu',{
props:['stulist'],
template: '<div><span style="color:red">{{stulist.id}}</span><span style="color:green">{{stulist.name}}</span><span style="color:yellow">{{stulist.height}}</span></div>'
});
//var qwe = {stuVue:[{id:1,name:"肥肥",height:18},{id:2,name:"嘟嘟",height:18},{id:3,name:"傻傻",height:18}]};
var asd = new Vue({
el: "#myVie",
data: {
stuVue:[{id:1,name:"肥肥",height:18},{id:2,name:"嘟嘟",height:18},{id:3,name:"傻傻",height:18}]
}
});
</script>
<div id="myView">
//div ID：为myView
<student
//v-for循环输出 遍历studentList
v-for="student in studentList"
//v-bind: 赋值 将student赋值给data
v-bind:data="student"
//v-bind:key 绑定 让系统自己找到student 绑定的ID
v-bind:key="student.id"></student>
</div>
<div id="myVie">
<stu
v-for="stu in stuVue"
v-bind:stulist="stu"
v-bind:key="stu.id">
</stu>
</div>
</body>
<script src="${pageContext.request.contextPath}/js/vue.js"></script>
<script type="text/javascript">
//必须确保Vue。component先加载出来
Vue.component('student',{
props:['data'],
template: '<div><span style="color:red">{{data.id}}</span><span style="color:green">{{data.name}}</span><span style="color:blue">{{data.height}}</span></div>'
});
//数据层 不可以放在前面
//必须确保Vue。component先加载出来
var myModel = {studentList:[{id:1,name:'张三',height:178},{id:2,name:'李四',height:178},{id:3,name:'王平',height:178},{id:4,name:'老张',height:173}]};var myViewModel = new Vue({
el:'#myView',
data:myModel
});
Vue.component('stu',{
props:['stulist'],
template: '<div><span style="color:red">{{stulist.id}}</span><span style="color:green">{{stulist.name}}</span><span style="color:yellow">{{stulist.height}}</span></div>'
});
//var qwe = {stuVue:[{id:1,name:"肥肥",height:18},{id:2,name:"嘟嘟",height:18},{id:3,name:"傻傻",height:18}]};
var asd = new Vue({
el: "#myVie",
data: {
stuVue:[{id:1,name:"肥肥",height:18},{id:2,name:"嘟嘟",height:18},{id:3,name:"傻傻",height:18}]
}
});
</script>
8256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
