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