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

最新推荐文章于 2024-04-26 16:47:03 发布

weixin_33845881

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量605

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/cengjingdeshuige/p/10168113.html

版权

<!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

weixin_33845881

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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-e...
复制链接

扫一扫