<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<meta name="screen-orientation" content="portrait"/>
<meta name="full-screen" content="yes"/>
<meta name="browsermode" content="application"/>
<meta name="x5-orientation" content="portrait"/>
<meta name="x5-fullscreen" content="true"/>
<meta name="referrer" content="no-referrer"/>
<meta name="x5-page-mode" content="app"/>
<meta name="format-detection" content="telephone=no, email=no"/>
<title>问卷填写</title>
<script src="jquery-1.10.2.js" type="text/javascript"></script>
<link rel="stylesheet" href="Plugins/vant/index.css?v=2">
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="Plugins/vant/vue.min.js"></script>
<script src="Plugins/vant/vant.min.js"></script>
</head>
<body style="background-color: #ffffff">
<div id='app'>
<auto-datalist :key="mykey" v-model="list" :style="style" :myname="name" @myupdate="undate"></auto-datalist>
<auto-datalist :key="mykey" v-model="list" :style="style" :myname="name" @myupdate="undate"></auto-datalist>
<auto-datalist :key="mykey" v-model="list" :style="style" :myname="name" @myupdate="undate">这是组件子内容</auto-datalist>
</div>
<template id="datalisttemp">
<div>
<div v-for="(item,index) in list" :key="item.key" :style="style">
<input v-model="item.num"/>
<button @click="delClick($event,item.key)">删除</button>
</div>
<button @click="addClick">添加</button>
<slot></slot>
</div>
</template>
<script>
Vue.component('auto-datalist', {
model: {
prop: 'datasource',
event: 'update'
},
template: '#datalisttemp',
props: { // 超级变态的一点,变量名必须全部用小写,有一个大写就不行,麻痹的,傻逼规定
datasource: Array,
style: String,
myname: String
},
data: function () {
return {
list: this.datasource
}
},
methods: {
addClick: function () {
console.log(this.myname);
this.list.push({key: (this.list.length + 1).toString(), num: this.list.length + 1});
this.$emit('update', this.list);
this.$emit('myupdate');
},
delClick: function (ev, val) {
let oldlist = this.list;
let newlist = [];
if (oldlist != null && oldlist != undefined && oldlist.length > 0) {
for (let i = 0; i < oldlist.length; i++) {
if (val != oldlist[i].key) {
newlist.push(oldlist[i]);
}
}
}
this.list = newlist;
this.$emit('update', this.list);
this.$emit('myupdate');
}
}
});
var app = new Vue({
el: '#app',
data: {
list: [{key: "1", num: 1}, {key: "2", num: 2}, {key: "3", num: 3}, {key: "4", num: 4}],
name: "张三",
mykey: 1,
style: ""
},
methods: {
undate: function (ev, val) {
this.mykey = this.mykey + 1;
}
}
})
</script>
</body>
</html>
VUE自定义组件
于 2021-08-16 16:46:15 首次发布
这是一个关于Vue组件使用的示例,包含多个`auto-datalist`组件,用于动态增删数据。通过`v-model`双向绑定数据,并通过事件监听进行数据更新。组件内部实现了添加和删除元素的功能,同时展示了如何传递属性和触发自定义事件。
摘要由CSDN通过智能技术生成