UNIAPP - 如何初始化data数据

利用Object.assign实现数据合并

 

 1 <template>
 2     <view><button type="default" @click="initData">点击初始化数据</button></view>
 3 </template>
 4 
 5 <script>
 6 export default {
 7     data() {
 8         return {
 9             hello: 0,
10             show1: false,
11             selectMenu2: []
12         };
13     },
14     onLoad() {
15         this.setData();
16     },
17     methods: {
18         // 模拟修改数据
19         setData() {
20             this.hello = 'okok';
21             this.show1 = true;
22             this.selectMenu2 = ['你好', '世界'];
23         },
24         // 初始化数据
25         initData() {
26             // 把this对象放入target，最后再把初始化属性拷贝进来(source)进行合并就可以了
27             Object.assign(this, { hello: 0, show1: false, selectMenu2: [] });
28             console.log('这里都可以取到值：', this, this._data);
29         }
30     }
31 };
32 </script>
33 
34 <style></style>

 

 

 

表单域(Form)如何置空?

 1 <template>
 2     <view>
 3         <demo-block title="clear-form" padding>
 4             <i-cell title="清空表单"></i-cell>
 5             <form @submit="formSubmit">
 6                 <input type="number" v-model="uphone" name="uphone" class="feedback" value="" placeholder="请输入你的手机号码" maxlength="11" />
 7                 <view class="sunui-border-b"></view>
 8                 <textarea value="" v-model="feedback" name="feedback" placeholder="请输入反馈信息..." class="feedback" />
 9                 <button form-type="submit" class="submit-btn sunui-radius10" hover-class="sunui-hover">提交信息</button>
10             </form>
11         </demo-block>
12     </view>
13 </template>
14 
15 <script>
16 export default {
17     data() {
18         return {
19             uphone: '',
20             feedback: ''
21         };
22     },
23     methods: {
24         formSubmit(e) {
25             let val = e.detail.value;
26             
27             console.log(val);
28 
29             // 实现表单/数据初始化(影响用户体验,无需v-modal) - 第一种方式
30             // uni.redirectTo({
31             //     url: '/pages/form/check'
32             // });
33             
34             // 实现表单初始化(利用v-model) - 第二种方式
35             Object.assign(this._data, { uphone: '', feedback: '' });
36         }
37     }
38 };
39 
40 </script>
41 
42 <style>
43 .feedback {
44     background-color: #fff;
45     padding: 20rpx;
46     width: 650rpx;
47     /* width: ; */
48 }
49 .submit-btn {
50     background-color: #4a8af4;
51     margin-top: 60rpx;
52     color: #fff;
53 }
54 </style>

 

posted @ 2020-09-27 14:56  Sunsin  阅读(10194)  评论(0)  编辑  收藏  举报