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>

原文地址:https://www.cnblogs.com/cengjingdeshuige/p/10168113.html

时间: 2024-10-07 19:16:54

vue的data的数据进行指定赋值,用于筛选条件的清空,或者管理系统添加成功后给部分数据赋值为空的相关文章

ajax请求成功后返回值如何赋值给js变量

var msg = "" $.ajax({             type:"POST",             url :"ajax/checkArray.php",             data:"nns_config_item_value="+nns_config_item_value,             success:function(data){                          if

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

var result=""; $.ajax({ type: "post", url: "../reportRule/main.do?method=selectReportToAdd", data:{}, success: function(msg){ result = msg; alert(result );\\有数据 } }); alert(result)\\无数据 原因: ajax是异步请求,即javascript是非阻塞运行的,在$.aja

vue的data数据用的是全局变量,变量是普通数据类型,变量改变,data未改变

如果vue的data数据用的是全局变量,变量是普通数据类型,那么当全局变量的值发生改变的的时候,那么data中用的这个值是不会发生改变的,也无法触发视图更新 ,因为是普通数据类型 解决: 全局的普通数据类型改为引用数据类型 Vue({ data:{ tabMouth: tabMouth, tabDay:tabDay, } }) var tabMouth = {value: false}; var tabDay = {value: false}; var tabEventCall = functi

把数组中的数据按照指定个格式拼接成一个字符串

/* * 需求:把数组中的数据按照指定个格式拼接成一个字符串 * 举例: *         int[] arr = {1,2,3};     * 输出结果: *        "[1, 2, 3]" * 分析: *         A:定义一个字符串对象,只不过内容为空 *         B:先把字符串拼接一个"[" *         C:遍历int数组,得到每一个元素 *         D:先判断该元素是否为最后一个 *             是:就直接

String-需求:把数组中的数据按照指定的格式拼接成一个字符串

package cn.lianxi; /* * 需求:把数组中的数据按照指定的格式拼接成一个字符串 * 举例: * int [] arr = {1,2,3}; * 输出结果 * “[1, 2, 3]” * 分析: * 1.定义一个字符串对象,只不过内容为空 * 2.把字符串拼接一个“[” * 3.遍历数组,得到每一个元素 * 4.先判断该元素是否为最后一个 * 是:就直接拼接元素和] * 不是:就拼接元素和逗号以及空格 * 5.输出拼接后的字符串 * */ public class zifu {

Oracle数据导入指定表空间

Oracle数据导入指定表空间 1. 打开工具Oracle SQL Plus 以dba身份登录sys用户sqlplus /nologconn [email protected] as sysdba 2. 创建用户并指定表空间 使用客户端工具或者Web管理控制台创建表空间以及用户给用户赋予connect.resource.dba权限grant connect,resource,dba to username; 注意:给oracle用户分配connect.resource角色时,此时connect

mysql导出数据至指定文件的命令

根据查询语句,导出数据至指定文件SELECT name INTO OUTFILE '/tmp/result.txt' FIELDS TERMINATED BY '-|-' OPTIONALLY ENCLOSED BY '"' LINES TERMINATED BY '\n' FROM table_name; FIELDS TERMINATED BY 表示指定字段分隔符OPTIONALLY ENCLOSED BY 表示指定字段包围符号LINES TERMINATED BY 表示指定行与行分隔符 m

VUE定义data的三种方式

写法粗糙,只是为了自己工作时方便查看 <script src="https://unpkg.com/vue/dist/vue.js"></script><div id="app">    <span>{{count}}</span>    <button @click="inc">+</button></div><script>var ap

记一次逻辑代码的实现(数组内数据按照指定时间差进行分组)

业务场景 有如下数据: id intime outtime1190771865,2019-11-26 13:27:26,2019-11-26 13:27:26 1190771865,2019-11-26 13:27:26,2019-11-26 13:27:26 1190771865,2019-11-26 16:42:46,2019-11-26 16:42:46 1190771865,2019-11-26 13:27:26,2019-11-26 13:27:26 1190771865,2019-1