Vue.js 动态增删组件

原创于 2020-05-21 15:26:08 发布 · 334 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue.js #组件

Vue.js 专栏收录该内容

4 篇文章

订阅专栏

参考： Vue.js 组件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue动态增删组件</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
	<div id="app">
		<button v-on:click="newItem()">新对象</button>
		<input v-model="itemName">
		<ol>
			<todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
		</ol>
		<button v-on:click="popItem">删除对象</button>
	</div>

	<script>
		var toto_item = Vue.component('todo-item', {
			props : [ 'todo' ],
			template : '<li>{{ todo.text }}</li>'
		})

		var v = new Vue({
			el : '#app',
			data : {
				sites : [ {
					text : 'Runoob'
				}, {
					text : 'Google'
				}, {
					text : 'Taobao'
				} ],
				itemName : "newItemName"
			},
			methods : {
				newItem : function() {
					this.sites.push({
						text : this.itemName
					});
				},
				popItem : function() {
					this.sites.pop();
				}
			}
		})
	</script>
</body>
</html>