<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>vue自定义组件和列表循环-新增方法改变数据</title>
</head>
<body>
<div class="app">
<ol>
<!--组件模板-->
<toolts-li v-bind:item="tool" v-for="tool in toolts"></toolts-li>
</ol>
<!--新增-->
<button type="button" v-on:click='add' name="button">Add</button>
</div>
</body>
<script src="js/vue.js" charset="utf-8"></script>
<script type="text/javascript">
Vue.component('toolts-li',{//模板标签名称
props:["item"],//指定v-bing:item 的值
template:'<li v-bind:id="item.id" v-bind:title="item.title" v-bind:fun="item.kejian">{{item.title}}</li>'
});
var vm=new Vue({
el:'.app',
data:{
toolts:[//定义数据
{id:0,title:'头部',kejian:true},
{id:1,title:'中间',kejian:true},
{id:2,title:'底部',kejian:true}
]
},
methods:{//方法对象
add:function(){//新增
this.toolts.push({id:3,title:'新增',kejian:true})
}
}
});
</script>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
