vue的data的数据进行指定赋值，用于筛选条件的清空，或者管理系统添加成功后给部分数据赋值为空
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>给vue部分data数据从新赋值</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body>
<p>比如说，搜索按钮的清空筛选条件，或者管理平台新增成功后给数据赋值为空,大量数据，挨个赋值比较麻烦,所以封装一个方法</p>
<p>点击下面的清空按钮：清空标题，改变结尾，内容不变,</p>
<div id="app">
<h1>
现在的标题： <span style="color:red;"> {{title}} </span>
</h1>
<p>
现在的内容: <span style="color:red;"> {{content}} </span>
</p>
<p>
测试的结尾: <span style="color:red;"> {{end}} </span>
</p>
<button @click="empty_btn()">清空</button>
</div>
<script>
/*
* @Author: shuige 曾经的水哥
* @Date: 2018-12-24 13:21:19
* @Last Modified by: shuige
* @Last Modified time: 2018-12-24 13:25:43
*/
var app = new Vue({
el: '#app',
data: {
title: '111',
content: '这是测试文字',
end: '这是结尾'
},
methods: {
empty_btn: function () {
this.empty_way({
title: '',
end: '改变end'
})
},
empty_way: function (empty_data) {
for (let key in empty_data) {
this[key] = empty_data[key]
}
},
},
mounted() { }, })
</script>
</body> </html>
vue的data的数据进行指定赋值，用于筛选条件的清空，或者管理系统添加成功后给部分数据赋值为空的更多相关文章
- AJAX获取数据成功后的返回数据如何声明成全局变量
var result=""; $.ajax({ type: "post", url: "../reportRule/main.do?method=se ...
- JS-DOM ～ 02. 隐藏二维码、锁定、获取输入框焦点、for循环为文本赋值、筛选条件、全选和反选、属性的方法操作、节点的层次结构、nodeType
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- flink---实时项目--day01--1. openrestry的安装 2. 使用nginx+lua将日志数据写入指定文件中 3. 使用flume将本地磁盘中的日志数据采集到的kafka中去
1. openrestry的安装 OpenResty = Nginx + Lua,是⼀一个增强的Nginx,可以编写lua脚本实现⾮非常灵活的逻辑 (1)安装开发库依赖 yum install -y ...
- VUE：data数据中，能被网页渲染出来的数据类型有哪些
我们都知道vue中,data里面的数据类型可以使任意类型. 但是能在网页上可以渲染出来的类型有哪些呢? 我们来看一下在VUE中data里的什么数据类型可以渲染出来. 我在下面列举了这些数据类型 显示结 ...
- Vue 组件 data为什么是函数
在创建或注册模板的时候,传入一个data属性作为用来绑定的数据.但是在组件中,data必须是一个函数,而不能直接把一个对象赋值给它. Vue.component('my-component', { t ...
- Vue Router路由守卫妙用：异步获取数据成功后再进行路由跳转并传递数据，失败则不进行跳转
问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...
- IMP数据到指定的表空间
IMP数据到指定的表空间 当我们通过imp导入dmp文件时,默认的情况下,数据会导入到exp出的dmp文件所对应的表空间里面. 比如:通过orcl_dev用户,exp数据,用orcl_test用户im ...
- FreeSql （八）插入数据时指定列
插入数据时指定列,和忽略列对应,未被指定的列将被忽略. var connstr = "Data Source=127.0.0.1;Port=3306;User ID=root;Passwor ...
- FreeSql （十二）更新数据时指定列
var connstr = "Data Source=127.0.0.1;Port=3306;User ID=root;Password=root;" + "Initia ...
随机推荐
- Android NDK学习（七）：NDK 编译支持 C++特有的库
如果你的C++代码中出现了很多C++特有的库,例如<iostream>,<list>等,那么你还需要在jni的文件夹下添加一个Application.mk文件,文件内容为: A ...
- Oracle和Mysql语法异同整理笔记
目录 (1) 模糊匹配 (2) 删除数据 (3) 时间函数 (4) 关键字问题 (5) 递归查询 (6) 排序问题 (7) 空值返回0 (8) 取最大值 (9) 列转换函数 (10) 类型转行函数 @ ...
- MyBatis 一级缓存和二级缓存及ehcache整合
一级缓存 什么是缓存?? 缓存是存储在内存(cache)中的数据,一般情况都存在内存,在内存数据存储满了,会存储到硬盘上(disk),或是在我们进行一些操作和配置也可以把缓存存储到磁盘中. 缓存的作用 ...
- Scala - 快速学习08 - 函数式编程：高阶函数
函数式编程的崛起 函数式编程中的“值不可变性”避免了对公共的可变状态进行同步访问控制的复杂问题,能够较好满足分布式并行编程的需求,适应大数据时代的到来. 函数是第一等公民 可以作为实参传递给另外一个函 ...
- new 操作符 做了什么
new 操作符 做了什么 new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例. 假设Test是一个构造函数,通常在创建对象的实例时,要使用new,eg:test = new ...
- Python档案袋（ 命令行操作 及 Os与Shutil文件操作补充 )
调用系统命令 import os #调用系统命令,输出只能输出到屏幕上,不能用变量接收 os.system("ipconfig") #调用系统命令,并把执行结果存到变量中 res= ...
- 访问iis 出现500.19错误
解决方案: 原因是asp应用程序没有打开,于是就在控制面板--程序---打开和关闭windows功能---internet信息服务----万维网服务------应用程序开发功能中选中全部 可能接下来会 ...
- sql中base64解码、译码
1.5.6版本及之后的版本的base64 主要就是两个MySQL内部函数to_base64和from_base64,使用也很简单,如下: 1)先查看MySQL的版本:mysql> select ...
- JavaEE 要懂的小事：二、图解 Cookie（小甜饼）
Writer :BYSocket(泥沙砖瓦浆木匠) 微 博:BYSocket 豆 瓣:BYSocket FaceBook:BYSocket Twitter ...
- struts转发和重定向action
1.转发(服务器端跳转) <action name="rederTo"> <result type="chain">hello</ ...