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