<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表渲染</title>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- is来避免一些错误 -->
<!--
这里因为：tbody里面只能渲染tr td，但是模板是row，导致渲染有问题
这样就只能跑到tbody的外边去了，所以就会出错
解决方法：用is
<tr is="row"></tr> 的意思是：
我渲染的是row这个组件，由于解析问题，我将row放在tr里边来表示用tr的方式正确渲染row组件
相同的还有：
ul里面的li
ol里面的li
select里面的option
<ul>
<li is="tem"></li>
</ul>
<select name="" id="">
<option is="tem" value=""></option>
</select>
如果是根组件，data可以直接是{}，但是如果是非根组件，data就得是一个函数
注意子组件的data必须是函数，因为子组件可以被调用很多次，希望每个子组件都是单独的，互不影响的
-->
<table>
<tbody>
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
</div>
<script>
Vue.component("row",{
data : function(){
return {
message : "this is a row"
}
},
template :
`<tr>
<td>{{message}}</td>
</tr>`
})
var vm = new Vue({
el : "#app",
})
</script>
</body>
</html>
网友评论