<!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版微信和手Q的聊天记录(仅作技术研究学习)

    1.引言 特别说明:本文内容仅用于即时通讯技术研究和学习之用,请勿用于非法用途.如本文内容有不妥之处,请联系JackJiang进行处理!   我司有关部门为了获取黑产群的动态,有同事潜伏在大量的黑产群 ...

  2. 如何把web.xml中的context-param、Servlet、Listener和Filter定义添加到SpringBoot中

    把传统的web项目迁移到SpringBoot中,少不了web.xml中的context-param.Servlet.Filter和Listener等定义的迁移. 对于Servlet.Filter和Li ...

  3. Kali学习笔记24：Nikto、Skipfish

    文章的格式也许不是很好看,也没有什么合理的顺序 完全是想到什么写一些什么,但各个方面都涵盖到了 能耐下心看的朋友欢迎一起学习,大牛和杠精们请绕道 实验环境: Kali机器IP:192.168.163. ...

  4. ubuntu 16.04 下安装动态链接库方法

    一般先使用ldd 来查看该应用程序缺少什么东西,然后,再根据sudo apt install XXX 去安装相应的动态库. 假如没有对应的库,可以使用: sudo ln -s /usr/lib/lib ...

  5. SQL三表左关联查询

    今天在开发的时候遇到了一个需求就是三遍关联查询,表A包含有表B和表C的uid,然后使用left join左关联查询: SELECT c.`uid`, `fromuseruid`, `touseruid ...

  6. 【jQuery】(4)---jQuery常用事件

    [jQuery入门](4)---jQuery常用事件 一.常用事件列表 1.blur() 当失去焦点时触发.包括鼠标点击离开和TAB键离开. 2.change() 当元素获取焦点后,值改变失去焦点事触 ...

  7. 2014--My Plan

    写于2014/1/10 从2014年开始我每年规划自己的life,每年10个plans. 回忆2013: 2013年,改变了很多.准确的说,那10个月,像个漫长的旅程,像个人生的转折点,应该可以这么说 ...

  8. 【干货】利用MVC5+EF6搭建博客系统（二）测试添加数据、集成Autofac依赖注入

    PS:如果图片模糊,鼠标右击复制图片网址,然后在浏览器中打开即可. 一.测试仓储层.业务层是否能实现对数据库表的操作 1.在52MVCBlog.IRepository程序集下创建IsysUserInf ...

  9. MongoDB 生产环境笔记

    目录 MongoDB 生产环境笔记 一.vm.zone_reclaim_mode 参数 二.添加 swap 分区 三.设置 swappiness 参数 四.内核和文件系统版本 五.禁用 Transpa ...

  10. 第10章 统计和查看Linux的系统状态

    写在前面的话:本文是假设你已经有了进程.内存.cpu的理论基础而写的,文中涉及的各种状态只给出了简单说明而没有解释它们的意义,如果不懂这些理论性的东西,本文可能让你看的直接想右上角叉叉.关于这些理论, ...