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 ...
随机推荐
- es5
var arr1=["上海","北京","广州"]; var arr2=[12,22, 33,58,32,45,92]; // 数组.方法( ...
- 吴恩达机器学习笔记3-代价函数II(cost function)
本节学习内容:通过使得θ = 0从而简化代价函数来初步了解代价函数的特性及作用原理.
- C 线性表的顺序存储实现及插入、删除等操作示例
一.线性表的定义 线性表(Linear List)是由同一类型元素构成的有序序列的线性结构.线性表中元素的个数称为线性表的长度:线性表内没有元素(长度为0)时,称为空表:表的起始位置称为表头,表的结束 ...
- Node.js(day2)
一.使用Node实现基本Apache的功能 在上一篇笔记中,我们提到如果打开一个文件需要进行一次url判断是繁琐的,我们希望我们的Node具有类似Apache这种web服务器的一个功能:将文件放到ww ...
- [Postman]发送第一个请求(1)
通过API请求,您可以与具有要访问的API端点的服务器联系,并执行某些操作.这些操作是HTTP方法. 最常用的方法是GET,POST,PUT和DELETE.方法的名称是不言自明的.例如,GET使您可以 ...
- LabVIEW（四）：数据存储和文件IO
1.使用NI数据采集板卡来进行数据保存和文件I/O操作.2.在一个典型的测试测量系统当中,包括:信号调理.信号采集.信号分析.信号显示.数据存储.数据存储:将采集到的数据储存到磁盘上,以备日后离线分析 ...
- 根据sockfd获取TCP连接本地地址以及对端地址
摘抄自muduo代码实现. 获取本地地址(LocalAddr): struct sockaddr_in6 sockets::getLocalAddr(int sockfd) { struct sock ...
- 【WebAPI No.1】创建简单的 .NETCore WebApi
介绍: 官方定义如下,强调两个关键点,即可以对接各种客户端(浏览器,移动设备),构建http服务的框架.Web API最重要的是可以构建面向各种客户端的服务. core的WebAPI与ASP.NET ...
- 解决ionic3 android 运行出现Application Error - The connection to the server was unsuccessful
在真机上启动ionic3打包成的android APK,启动了很久结果弹出这个问题: Application Error - The connection to the server was unsu ...
- 【shiro】(3)---了解Shiro
了解Shiro 一Apache Shiro作用 Apache Shiro是一个功能强大且易于使用的Java安全框架,可执行身份验证,授权,加密和会话管理,令行应用程序. Shiro提供了应用程序安全A ...