<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Vue</title>
</head>
<body>
<ul id="app">
<!-- 组件 my-component
v-for循环组件
v-bind:data绑定组件数据 -->
<my-component v-for="data in datas" v-bind:data="data"></my-component>
<!-- @click绑定按钮事件 -->
<button type="button" @click="load()">加载</button>
</ul>
</body>
<!-- 引用 -->
<script type="text/javascript" src="../dist/vue.js"></script>
<script>
// 组件注册
Vue.component('my-component', {
props:['data'], // 接收数据
// 模板
// @click 绑定事件 传参
// {{data.name}} 输出数据
template: '<li @click="liClick(data.name)">{{data.name}}</li>',
methods:{
// 方法
liClick:function(name){
alert(name)
}
}
})
// 构造
var vue = new Vue({
el: '#app',
data: { // 数据
datas:[{name:'张三'},{name:'刘芳'}]
},
methods:{ // 方法
load:function(){
// 添加数据
this.datas.push({name:'王五'},{name:'牛蛙'})
}
}
})
</script>
</html>
vue学习——数据的添加加载
猜你喜欢
转载自blog.csdn.net/qq_36061522/article/details/87912483
今日推荐
周排行