码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-12-24 13:52:07      阅读:564      评论:0      收藏:0      [点我收藏+]

标签:html   pat   com   charset   char   var   mount   ble   new   

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

标签:html   pat   com   charset   char   var   mount   ble   new   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!