vue项目新手入门

2023-04-01 15:34| 来源: 网络整理| 查看: 265

目录 vue初学者入门触发按钮事件打开按钮方法新增列表弹出框设置结束

vue初学者入门

vue小白一枚，想记录下入门学习的一些心得。以触发一个界面表单的新增按钮为例，来讲解新增弹出框的完整实现过程逻辑。

触发按钮事件

通过@click="newAdd()"来触发按钮事件：

新增打开按钮方法

在script标签内设置按钮方法，定义addForm（新增列表）、addVisible（新增弹出框的id）：

methods: { newAdd() { this.addForm = {}; this.addVisible = true; }, } 新增列表

1、首先在vue项目的如下位置定义一个空的列表：

export default{ data(){ return{ addForm: {}, } } }

2、然后在template内设置弹出框样式时添加如下代码：

ref="addFormRef" :model="addForm"

同时对每个新添加的信息：

v-model="addForm.name"

3、最后在自定义的新增的submit中别忘记了添加addForm的提交方法。例如：

submit(){ this.$refs.addFormRef.validate(valid=> { //这里写入提交（成功/失败）的逻辑代码 } } 弹出框设置

1、和列表一样，首先需要定义：

export default{ data(){ return{ addVisible: false, } } }

2、然后在template内设置样式时添加：

:visible:sync="addVisible"

同时对新增弹出框的取消按钮添加点击方式

取消结束

这样子，基本一个完整的点击事件就设置完成了。

【本文地址】

今日新闻