Vue：is用法

在一些情況要滿足html5的要求時，不能直接使用組件時，我們可以使用is屬性來實現 例如：

		<div id="app-3">
			<table>
				<tbody>
					<todo-item></todo-item>
					<todo-item></todo-item>
					<todo-item></todo-item>
				</tbody>
			</table>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
				Vue.component('todo-item', {
				template: '<tr><td>Hello</td></tr>'
			})
			var app3 = new Vue({
				el: '#app-3',
				
			})
		</script>

顯示結果

我們看到<tr>顯示在<table>外面，這是錯誤的，那么如何修改呢？

<div id="app-3">
			<table>
				<tbody>
					<tr is="todo-item"></tr>
					<tr is="todo-item"></tr>
					<tr is="todo-item"></tr>
					
				</tbody>
			</table>
		</div>

		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
				Vue.component('todo-item', {
				template: '<tr><td>Hello</td></tr>'
			})
			var app3 = new Vue({
				el: '#app-3',
				
			})
		</script>

這樣顯示結果如下

這就對了！