<!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的数据进行指定赋值，用于筛选条件的清空，或者管理系统添加成功后给部分数据赋值为空的更多相关文章

  1. AJAX获取数据成功后的返回数据如何声明成全局变量

    var result=""; $.ajax({ type: "post", url: "../reportRule/main.do?method=se ...

  2. JS-DOM ～ 02. 隐藏二维码、锁定、获取输入框焦点、for循环为文本赋值、筛选条件、全选和反选、属性的方法操作、节点的层次结构、nodeType

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. flink---实时项目--day01--1. openrestry的安装 2. 使用nginx+lua将日志数据写入指定文件中 3. 使用flume将本地磁盘中的日志数据采集到的kafka中去

    1. openrestry的安装 OpenResty = Nginx + Lua,是⼀一个增强的Nginx,可以编写lua脚本实现⾮非常灵活的逻辑 (1)安装开发库依赖 yum install -y ...

  4. VUE：data数据中，能被网页渲染出来的数据类型有哪些

    我们都知道vue中,data里面的数据类型可以使任意类型. 但是能在网页上可以渲染出来的类型有哪些呢? 我们来看一下在VUE中data里的什么数据类型可以渲染出来. 我在下面列举了这些数据类型 显示结 ...

  5. Vue 组件 data为什么是函数

    在创建或注册模板的时候,传入一个data属性作为用来绑定的数据.但是在组件中,data必须是一个函数,而不能直接把一个对象赋值给它. Vue.component('my-component', { t ...

  6. Vue Router路由守卫妙用：异步获取数据成功后再进行路由跳转并传递数据，失败则不进行跳转

    问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...

  7. IMP数据到指定的表空间

    IMP数据到指定的表空间 当我们通过imp导入dmp文件时,默认的情况下,数据会导入到exp出的dmp文件所对应的表空间里面. 比如:通过orcl_dev用户,exp数据,用orcl_test用户im ...

  8. FreeSql （八）插入数据时指定列

    插入数据时指定列,和忽略列对应,未被指定的列将被忽略. var connstr = "Data Source=127.0.0.1;Port=3306;User ID=root;Passwor ...

  9. FreeSql （十二）更新数据时指定列

    var connstr = "Data Source=127.0.0.1;Port=3306;User ID=root;Password=root;" + "Initia ...

随机推荐

  1. Android之.9图的知识

    Android之.9图的知识 .9图的介绍 .9图也称为pPatch图,它是android app开发里一种特殊的图片形式,文件的扩展名为:.9.png. 9patch图片的作用就是在图片拉伸的时候保 ...

  2. LabVIEW（一）：知识入门

    一.DAQ基础知识简介 1.DAQ是英文Data Acquisition (数据采集)的缩写. 数据采集(DAQ)是指测量:电压.电流.温度.压力.声音.编码数据等电气或物理现象的过程. 2.数据采集 ...

  3. pickle模块及其API

    模块:pickle 所包含API列表: pickle.dumps : 把任意对象序列化成一个bytes pickle.dump : 直接把对象序列化后写入一个file-like Object pick ...

  4. [Leetcode]895.最大频率栈

    Problem 实现 FreqStack,模拟类似栈的数据结构的操作的一个类. FreqStack 有两个函数: push(int x),将整数 x 推入栈中. pop(),它移除并返回栈中出现最频繁 ...

  5. 《JQuery技术内幕》读书笔记——自调用匿名函数剖析

    Javascript语言中的自调用匿名函数格式如下: (function(){ //do somethings })(); 它还有另外两种等价写法如下: //等价写法一 (function(){ // ...

  6. 浅尝Spring Cloud Sleuth

    Spring Cloud Sleuth提供了分布式追踪(distributed tracing)的一个解决方案.其基本思路是在服务调用的请求和响应中加入ID,标明上下游请求的关系.利用这些信息,可以方 ...

  7. 痞子衡嵌入式：让你从此高效写作的轻量级标记语言(Markdown)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是轻量级标记语言Markdown. 1.假如你有过这样的烦恼? 想写出排版优雅简洁的文章,并且能够轻易地发表(连同文字和排版)到各大网站上 ...

  8. MyBatis源码解析（三）——Transaction事务模块

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6634151.html 1.回顾 之前介绍了Environment环境类,这其实是一个单例类 ...

  9. 解读经典-《C#高级编程》第七版-Chapter1-.Net体系结构-Page1-6

    前言 大家好.这是开通本号的第一篇文章.从事IT行业已经20年了,从使用PowerBuilder做企业信息系统开始,做了七八年开发,然后转型Java不是很成功,从07年之后,我转做产品经理,机缘巧合, ...

  10. 南大算法设计与分析课程OJ答案代码（1）中位数附近2k+1个数、任意两数之和是否等于给定数

    问题1 用来测试的,就不说了 问题2:中位数附近2k+1个数 给出一串整型数 a1,a2,...,an 以及一个较小的常数 k,找出这串数的中位数 m 和最接近 m 的小于等于 m 的 k 个数,以及 ...