vue 吐槽大会！！！
vue吐槽大会！！！
·
效果图
注意！！！需要外引入 vue 文件！别忘咯
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<h1>吐槽大会</h1>
 用户名：<input type="text" v-model="done"><br />
吐槽内容：
<textarea v-model="title"></textarea>
<button @click="addItem">提交</button>
<h3>吐槽内容</h3>
<div v-for="item in list" :key="item.list" style="display: flex;">
<span>{{item.a}}</span>
<span>{{item.c}}</span>
<span>{{item.b}}         </span>
<span @click="delItem(item)">{{item.d}}</button>
</div>
</div>
</body>
<script src=" ./js/vue.js"></script>
<script>
Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。
new Vue({
el: "#app",
methods: {
delItem(item) {
// 查找item在list的下标
var ind = this.list.indexOf(item);
// 进行删除
this.list.splice(ind, 1)
},
addItem() {
if (this.done === "" || this.title === "") {
alert("用户名或内容不可为空")
} else {
this.list.unshift({
a: this.done,
b: this.title,
c: this.shuo,
d: this.shan
})
this.done = "";
this.title = "";
}
}
},
data() {
return {
list: [{}, ],
done: "",
title: "",
shuo: "说：",
shan: "删除",
}
}
})
</script>
</html>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)