2021-01-22

最新推荐文章于 2021-04-21 11:23:21 发布

戏份

最新推荐文章于 2021-04-21 11:23:21 发布

阅读量128

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_44656535/article/details/112981202

版权

该博客介绍了Vue中拓展运算符(...)的使用，主要用于赋值操作。在创建axios实例时设置默认配置，并在Vue组件的数据对象中使用，例如在更新票卡列表时，通过...data将响应数据赋值给ticketCardList，确保不直接修改原始数据。在方法中调用axios获取所有票卡数据并使用拓展运算符处理响应，展示了如何在实际开发中利用拓展运算符进行数据处理。

摘要由CSDN通过智能技术生成

Vue中[...]作用

...作用是赋值

例：
// 创建实例时设置配置的默认值

const INSTANCE = axios.create({

	 baseURL: '/api/v1/ticketCard',
	 timeout: '20000'
});
var app = new Vue({
  	el: "#ticketCardManage",
    data: {
    ticketCardList: [],//票卡列表
    modelTitle: '模板标题', //模板标题
    modelType: 1,//模板操作类型  0添加 1修改 2删除
    modelData: '', //操作数据对象
    modelUrlList: ['/addTicketCard', '/updateTicketCard', 						  '/deleteTicketCard']
},

mounted() {
    this.queryTicketCard();
},

methods: {
    //所有票卡数据
    queryTicketCard: function () {
        INSTANCE.get('ticketCardAll')
            .then(res => {
                const {code = 500, data = [], msg = '失败'} = res.data;
                if (code === 200) {
                    this.ticketCardList = [...data];
                }
                
            })
            .catch(function (error) {
                //请求处理失败
                console.log(error);
            })
            .finally(() => {
                //无论失败与否皆会执行
            })
    }