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 ...
随机推荐
- Eclipse 中构建 Maven 项目的完整过程 - 动态 Web 项目
进行以下步骤的前提是你已经安装好本地maven库和eclipse中的maven插件了(有的eclipse中已经集成了maven插件) 一.Maven项目的新建 1.鼠标右键---->New--- ...
- Metasploit Framework（2）Exploit模块、Payload使用
文章的格式也许不是很好看,也没有什么合理的顺序 完全是想到什么写一些什么,但各个方面都涵盖到了 能耐下心看的朋友欢迎一起学习,大牛和杠精们请绕道 Exploit模块分为主动和被动(Active.Pas ...
- [Swift]两种线程休眠的方式
一.线程休眠方式1 [Swift]与[C#]的比较: //C#:需要添加using System.Threading; //线程休眠3000毫秒,即3秒 Thread.Sleep(); //Swift ...
- 浅谈static关键字的四种用法
1.修饰成员变量 在一个person类中,一个成员变量例如 String name,当new2个person()对象时候,这2个对象在堆的位置是不同的,给name赋值张三.李四,这两个对象的name是 ...
- Oracle开窗函数笔记及应用场景
介绍Oracle的开窗函数之前先介绍一下分析函数,因为开窗函数也属于分析函数 分析函数用于计算基于组的某种聚合值,它和聚合函数的不同之处是:对于每个组返回多行,而聚合函数对于每个组只返回一行. 上面是 ...
- redux源码学习笔记 - applyMiddleware
在创建store时,createStore(reducer, preloadedState, enhancer),除了reducer函数,初始状态,还可以传入enhancer.这个enhancer在c ...
- IDEA整合Junit详细步骤
一.添加Junit插件. 1.file-->setting-->plugins-->搜索Junit-->安装插件(一般已默认安装,无需手动安装). 二.设置Junit测试参数: ...
- Android内存管理篇 - adj的概念与进程adj级别控制
本文主要介绍Android的lowmemorykiller的oom_adj的相关概念,以及根据一些案例来阐述了解oom_adj对于做Android应用开发的重要意义. 一.lowmeorykiller ...
- [Jenkins][Git]ssh原理以及与https的区别
-------------------------------------------------------------------- 本文参考多篇文章结合自身情况完成,可自由转载,需保留本文出处! ...
- MyEclipse忽略js报错
MyEclipse对官网下载的js报错,解决办法如下: 1. 对js文件右键选择 MyEclipse --> Exclude From Validation 2. 然后继续右键执行MyEclip ...