vue基于通信的发布博客，删除功能实现

MuFeng@

已于 2023-01-26 14:20:56 修改

阅读量154

点赞数

分类专栏： vue练习题文章标签： vue.js javascript 前端

于 2022-10-21 11:42:53 首次发布

本文链接：https://blog.youkuaiyun.com/m0_58451019/article/details/127443293

版权

vue练习题专栏收录该内容

9 篇文章

订阅专栏

这是一个关于Vue.js的示例，展示了如何创建一个简单的数据发布系统。用户可以在文本框中输入内容，点击发布按钮将内容添加到列表中。同时，列表中的每一项都可以被点击删除。Vue组件和事件绑定在这里得到了应用，实现了数据的双向绑定和组件间的通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		
	</head>
	<body>
		
		<div id="app">
			<div class="container">
				<div class="">
					<textarea v-model="shuju" class="form-control"></textarea>
					<button class="btn btn-outline-info" @click="fabu()">发布</button>
				</div>
				<zx :cc="cc" @sc="del"></zx>
			</div>
		</div>
		
		<template id="temp">
			<div class="">
				<ul>
					<li @click="shanchu(index)" class="bg-danger my-3" v-for="(item,index) in cc">{{item}}</li>
				</ul>
			</div>
		</template>
	</body>
		<script type="text/javascript">
			// 整体引入
			Vue.component("zx",{
				template:"#temp",
				props:["cc"],
				methods:{
					shanchu(index){
						this.$emit("sc",index)
					}
				}
			})
			<!-- 局部引入 -->
			new Vue({
				el:"#app",
				data:{
					cc:["66666"],
					shuju:"",
				},
				methods:{
					fabu(){
						if(this.shuju){
							this.cc.push(this.shuju)
						}else{
							alert("发布内容不可为空")
						}
						this.shuju = ""
					},
					del(index){
						this.cc.splice(index,1)
					}
				},
				
			})
		</script>
	
</html>