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 ...
随机推荐
- Spring boot 内置tomcat禁止不安全HTTP方法
Spring boot 内置tomcat禁止不安全HTTP方法 在tomcat的web.xml中可以配置如下内容,让tomcat禁止不安全的HTTP方法 <security-constraint ...
- Python学习笔记【第十二篇】：Python异常处理
什么是异常 异常就是程序运行时发生错误的信号,在python中,错误触发的异常如下 错误类型分为两种:语法错误和业务逻辑错. 异常的类型 AttributeError 试图访问一个对象没有的树形,比如 ...
- Python的基础语法（二）
0. 前言 接着上一篇博客的内容,我将继续介绍Python相关的语法.部分篇章可能不只是简单的语法,但是对初学者很有帮助,也建议读懂. 1. 表达式 由数字.符号.括号.变量等组成的组合. 算术表达式 ...
- navicat连接mysql报错1251的解决方法
1.新安装的mysql8,使用破解版的navicat连接的时候一直报错,如图所示: 2.网上查找原因发现是mysql8 之前的版本中加密规则是mysql_native_password,而在mysql ...
- Python爬虫-萌妹子图片
最近发现一个可以看图的地方,一张张翻有点累,毕竟只有一只手(难道鼠标还能两只手翻?).能不能下到电脑上看呢,毕竟不用等网速,还可以预览多张,总之很方便,想怎么就怎么,是吧? 刚好这几天在学python ...
- jQuery文档操作
jQuery文档操作 1.jq文档结构 var $sup = $('.sup'); $sup.children(); // sup所有的子级们 $sup.parent(); // sup的父级(一个, ...
- Java-二进制转10进制原理机制
任何文件在计算机储存时都是以二进制储存的,由 1和0 组成,如: 101010101010100111110100101010 现在有一组二进制数据: 10010110 那么他转成10进制是多少呢(我 ...
- 增删改查Spring+MyBatis
其实这次写这个增删改查,我的收获很大,在同学的帮助下和老师的推动下,我也是学会了很多的技能点. 1.显示数据 显示数据对我而言可以说很好做,因为我以前增删改查做了有N遍,但是我却每次都是无功而返,半途 ...
- java中编写增删改查
按照图书数据库来说 //查询 :查询的返回值有两种类型,如果返回的数据你不确定是一条还是多条就返回一个List集合.如果你确定数据返回的是一条,可以把返回值换成Book实体类型.public List ...
- Linux的 文件 和 目录 管理
包括了文件和目录的创建.删除.修改,权限.压缩.搜索.分区.挂载 简单的一些命令: [ pwd ]查看当前所在目录 [ cd .. ]上级目录 [ cd ~ ]当前用户的家目录 [cd -]上次打开目 ...