1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>给vue部分data数据从新赋值</title>
  9. </head>
  10. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  11.  
  12. <body>
  13.     <p>比如说，搜索按钮的清空筛选条件，或者管理平台新增成功后给数据赋值为空,大量数据，挨个赋值比较麻烦,所以封装一个方法</p>
  14.     <p>点击下面的清空按钮：清空标题，改变结尾，内容不变,</p>
  15.     <div id="app">
  16.         <h1>
  17.             现在的标题： <span style="color:red;"> {{title}} </span>
  18.         </h1>
  19.         <p>
  20.             现在的内容: <span style="color:red;"> {{content}} </span>
  21.         </p>
  22.         <p>
  23.             测试的结尾: <span style="color:red;"> {{end}} </span>
  24.         </p>
  25.         <button @click="empty_btn()">清空</button>
  26.     </div>
  27.     <script>
  28.         /*
  29.          * @Author: shuige 曾经的水哥
  30.          * @Date: 2018-12-24 13:21:19
  31.  * @Last Modified by: shuige
  32.  * @Last Modified time: 2018-12-24 13:25:43
  33.          */
  34.         var app = new Vue({
  35.             el: '#app',
  36.             data: {
  37.                 title: '111',
  38.                 content: '这是测试文字',
  39.                 end: '这是结尾'
  40.             },
  41.             methods: {
  42.                 empty_btn: function () {
  43.                     this.empty_way({
  44.                         title: '',
  45.                         end: '改变end'
  46.                     })
  47.                 },
  48.                 empty_way: function (empty_data) {
  49.                     for (let key in empty_data) {
  50.                         this[key] = empty_data[key]
  51.                     }
  52.                 },
  53.             },
  54.             mounted() {
  55.  
  56.             },
  57.  
  58.         })
  59.     </script>
  60. </body>
  61.  
  62. </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 JNI 学习(十一)：Invocation Api

    1. 简介 Invocation API允许软件提供商在原生程序中内嵌Java虚拟机.因此可以不需要链接任何Java虚拟机代码来提供Java-enabled的应用程序. 以下代码演示如何使用: #in ...

  2. Javascript高级编程学习笔记（47）—— 元素遍历

    元素遍历 为了方便我们使用JS来遍历文档中的元素,W3C在原来的基础之上提出了 Element Traversal 规范 这一规范主要就是为了统一浏览器对文档中节点解析不一致的问题. 比如在某些浏览器 ...

  3. JDK设计模式之——策略模式(Comparable和Comparator接口)

    策略模式:其实就是java的多态...父类引用指向子类对象. 使用策略模式,改善排序算法上文中需要排序的是一个数组 让他可以对任何类型的数组进行排序 1.利用 接口 Comparable<T&g ...

  4. 微信小程序快捷键（Mac和windows）

    最近因为有点闲暇时间,所以抽空简单了解了小程序,因为小程序是使用微信开发者工具编码,不能使用其它编辑器,比如,Sublime,Hubilder等. 所以就百度了一下小程序快捷键,但总觉得不全,所以就去 ...

  5. Kali学习笔记22：缓冲区溢出漏洞利用实验

    实验机器: Kali虚拟机一台(192.168.163.133) Windows XP虚拟机一台(192.168.163.130) 如何用Kali虚拟机一步一步“黑掉”这个windowsXP虚拟机呢? ...

  6. Oracle SQL优化器简介

    目录 一.Oracle的优化器 1.1 优化器简介 1.2 SQL执行过程 二.优化器优化方式 2.1 优化器的优化方式 2.2 基于规则的优化器 2.3 基于成本的优化器 三.优化器优化模式 3.1 ...

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

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

  8. 使用 WRK 压力测试工具对 ASP.NET Core 的接口进行压力测试

    0. 简要介绍 WRK 是一款轻量且易用的 HTTP 压力测试工具,通过该工具我们可以方便地对我们所开发的 WebAPI 项目进行压力测试,并且针对测试的情况返回结果. PS:Wrk 并不能针对测试的 ...

  9. Gradle实现自动打包，签名，自定义apk文件名

    Gradle实现自动打包,签名,自定义apk文件名 什么是签名,签名有什么用 Android APP都需要我们用一个证书对应用进行数字签名,不然的话是无法安装到Android手机上的,平时我们调试运行 ...

  10. ITP项目：一期版本分享

    摘要: 原创出处: http://www.cnblogs.com/Alandre/ 泥沙砖瓦浆木匠 希望转载,保留摘要,谢谢! 写代码和练书法一样,要坚持.昨晚的提笔留下. 一.项目小结: 项目经历了 ...