vue 简单对话框

小咪咪 2022-12-01 15:53 130阅读 0赞

## 初学者 vue 的简单对话框 ##

代码如下：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<h1>欢迎来到吐槽大厅</h1>
    		<div id="app">
    			吐槽者：<input type="text" v-model="user" /><br>
    			内容 ：<input type="text" v-model="con" value="" /><br>
    			
    			<button type="button" @click="obj()">提交</button><br>
    			<p>吐槽回复：</p>
    			<div class="box" v-for="(item,index) in list">
    				<span>{ { item.name}}：{ { item.speak}}</span>
    				<button @click="del(index)">删除</button>
    			</div>
    			
    		</div>
    		<script type="text/javascript">
    			new Vue({ 
    				el:"#app",
    				data:{ 
    					user:'',
    					con:'',
    					list:[
    						{ "name":"小花","speak":"你个大傻子"},
    						{ "name":"花花","speak":"乖乖的"}
    					]
    				},
    				methods:{ 
    					obj(){ 
    						if(this.user!='' && this.con!=''){ 
    							this.list.unshift({ "name": this.user,"speak":this.con});//添加数据
    							this.user='';//清空输入框
    							this.con='';
    						}
    					},
    					del(index){ 
    						// console.log(this.list[index])
    						this.list.splice(index,1);//删除
    					}
    					
    				}
    			})
    			
    			
    			
    		</script>
    		
    		
    	</body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，130人围观）

还没有评论，来说两句吧...

相关阅读

相关 EasyUI中Dialog对话框的简单使用

场景效果 ![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

淩亂°似流年/ 2023年10月18日 20:08/ 0 赞/ 58 阅读

相关 vue2.0+vuex实现全局对话框

vue+vuex+vuetify 1.在文件夹components下新建文件夹Dialog.vue <template> <v-layout row j

古城微笑少年丶/ 2023年10月18日 10:38/ 0 赞/ 46 阅读

相关 Android 常见对话框的简单使用（提示信息对话框、单选多选对话框、自定义对话框）

目录一、提示信息对话框：二、单选对话框：三、多选对话框：四、自定义对话框：演示项目完整代码： -------------------- 一、提示信

亦凉/ 2022年12月30日 15:52/ 0 赞/ 217 阅读

相关 vue 简单对话框

初学者 vue 的简单对话框代码如下： <!DOCTYPE html> <html> <head> <meta charset=

小咪咪/ 2022年12月01日 15:53/ 0 赞/ 131 阅读

相关 vue element dialog 对话框

通过绑定`:visible.sync`属性来控制对话框 <template> <el-card> <el-button type="tex

快来打我*/ 2022年10月30日 00:32/ 0 赞/ 226 阅读

相关简单代码gui确认对话框_20160909

package Chapter03; import java.text.SimpleDateFormat; import java.util.;

待我称王封你为后i/ 2022年09月25日 12:25/ 0 赞/ 187 阅读

相关 SweetAlert简单使用，弹出对话框

SweetAlert可以替代[JavaScript][]原生的alert和confirm等函数呈现的弹出提示框，它将提示框进行了美化，并且允许自定义，支持设置提示框标题、提示类

女爷i/ 2022年07月14日 04:37/ 0 赞/ 363 阅读

相关 MFC 基于对话框的简单加法器

环境：VS2010 一、创建编辑框控件和关联变量 ID = IDC_EDIT_NUM1; ID = IDC_EDIT_NUM2;

墨蓝/ 2022年06月04日 06:12/ 0 赞/ 221 阅读

相关 vue实现dialog对话框

一、为实现该dialog的复用，我这里把它写成一个组件（Vue中定义的组件） <template> <div id="dialog"> <

刺骨的言语ヽ痛彻心扉/ 2022年05月26日 13:39/ 0 赞/ 304 阅读

相关 Android显示简单的对话框

效果图如下 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

青旅半醒/ 2021年10月30日 01:16/ 0 赞/ 357 阅读