<!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. 每天学点SpringCloud（五）：如何使用高可用的Eureka

    前几篇文章我们讲了一下Eureka的基础使用,但是呢有一个很重要的问题,我们讲的都是单机版的情况,如果这个时候Eureka服务挂了的话,那么我们的服务提供者跟服务消费者岂不是都废了?服务提供者和消费者 ...

  2. 第42节：Java知识点回顾复习

    Java介绍 Java是一门面向对象的程序设计的编程语言,在1995年,sun公司发布了Java这门编程语言,有咖啡的名称,是当时灵机一动的想法.在2010年的时候被Oracle公司收购了,目前jdk ...

  3. Python 函数中参数的分类及使用

    ######################非固定参数################## #第一种方式:def send_alert(msg,*users):##*users 是非固定参数,将传过来 ...

  4. C#8个常用的字符串的操作

    1.根据单个分隔字符用split截取 string st="GT123_1"; string[] sArray=st.split('_'); 输出:sArray[0]=" ...

  5. [转载]PHP中PSR-[0-4]规范

      PHP是世界上最伟大的语言,这一点是毋庸置疑的吧.哈哈哈哈哈哈 .这个霸气的开头不错!(^__^) 但是正是因为伟大,所以用的人也就多了,人一多,再牛逼再伟大的东西,都会产生问题,逐渐就造成了很多 ...

  6. CentOS随笔——克隆虚拟机

    克隆虚拟机 1．关闭要被克隆的虚拟机 2．找到克隆选项 3．欢迎页面,如图94所示 4．克隆虚拟机,如图95所示 5．设置创建完整克隆,如图96所示 6．设置克隆的虚拟机名称和存储位置,如图97所示 ...

  7. 插头dp初探

    问题描述 插头dp用于解决一类可基于图连通性递推的问题.用插头来表示轮廓线上的连通性,然后根据连通性与下一位结合讨论进行转移. 表示连通性的方法 与字符串循环最小表示不同,这种方法用于给轮廓线上的联通 ...

  8. Android--多线程之进程与线程

    前言 对于Android程序中,使用多线程的技术是必不可少的,就拿之前最简单的例子来说明,对于Android4.0+的应用而言,访问网络必须另起线程才可以访问.本片博客介绍Android下进程和线程, ...

  9. DNS服务器的搭建

    更详细的dns笔记整理: http://services.linuxpanda.tech/DNS/index.html 1 DNS介绍 DNS(Domain Name System,域名系统),因特网 ...

  10. CNN 模型压缩与加速算法综述

    本文由云+社区发表 导语:卷积神经网络日益增长的深度和尺寸为深度学习在移动端的部署带来了巨大的挑战,CNN模型压缩与加速成为了学术界和工业界都重点关注的研究领域之一. 前言 自从AlexNet一举夺得 ...