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 WebView 超大字号适配问题
目前在使用 Android WebView 展示H5页面的时候,存在当系统字号设置超大的时候,出现页面内容展示不全的问题. 此问题是因为Android WebView 默认使用系统字号进行展示. 解决 ...
- Redis 如何分析慢查询操作？
什么是慢查询 和mysql的慢SQL日志分析一样,redis也有类似的功能,来帮助定位一些慢查询操作. Redis slowlog是Redis用来记录查询执行时间的日志系统. 查询执行时间指的是不包括 ...
- SQL中EXPLAIN命令详解
explain显示了mysql如何使用索引来处理select语句以及连接表.可以帮助选择更好的索引和写出更优化的查询语句. 使用方法,在select语句前加上explain就可以了: 如: expla ...
- springboot项目部署云服务器
Springboot项目部署云服务器 springboot项目部署云服务器还是挺简单的 首先你要有java运行环境,就是jdk的安装,如果还没有装没有参考安装:阿里云ECS建网站(建站)超详细全套完整 ...
- c# Console application Open/Get Url by Browser
C# url 用 浏览器打开.C#获取浏览器的url static void Main(string[] args) { string file = @"C:\Users\Hero\Desk ...
- C语言 标准输入 清空缓存
- SharePoint如何配置Ipad跳转等问题
如何配置Ipad跳转 Apple iPad 设备上不支持 SharePoint 标准视图.用户可以改用移动视图在 iPad 设备上查看 SharePoint 内容.默认情况下,iPad 用户被重定向到 ...
- mysql年初至今聚合
年初至今聚合和滑动聚合类似,不同的地方仅在于统计的仅为当前一年的聚合.唯一的区别体现在下限的开始位置上.在年初至今的问题中,下限为该年的第一天,而滑动聚合的下限为N个月的第一天.因此,年初至今的问题的 ...
- 一篇文章详解python的字符编码问题
一:什么是编码 将明文转换为计算机可以识别的编码文本称为“编码”.反之从计算机可识别的编码文本转回为明文为“解码”. 那么什么是明文呢,首先我们从一段信息说起,消息以人们可以理解,易懂的表示存在,我们 ...
- Go基础系列：channel入门
Go channel系列: channel入门 为select设置超时时间 nil channel用法示例 双层channel用法示例 指定goroutine的执行顺序 channel基础 chann ...