Vue 将对象转变成字符串输出(去除对象中的花括号和双引号)

去除对象中的花括号和双引号,转变成字符串输出。

实现效果,如图:
在这里插入图片描述
HTML代码:

<template>
    <div>
        <div style="background-color: #f4f4f4;margin:50px 0 0 460px;width:500px;height:300px;">
            <p>原对象:{{ testObj }}</p>
            <p>改变后:{{ tempObj }}</p>
        </div>
    </div>
</template>

JavaScript代码:

<script>
export default {
    data () {
        return {
            testObj: {
                id: '01',
                name: '张三',
                age: '二十'
            },
            tempObj:{}
        }
    },
    created() {
        this.changeText(this.testObj)
    },
    methods: {
        changeText(item) { // 将对象格式化成字符串
            var test = JSON.stringify(item) // JSON.stringify()用于将JavaScript对象或值转换为JSON字符串
            var test2 = test.slice(1, test.length - 1)
            var test3 = []
            for (var i = 0; i < test2.length; i++) {
                test3.push(test2[i].replace('"', ''))
            }
            for (var j = 0; j < test3.length; j++) {
                if (test3[j] === '') {
                    test3.splice(j, 1)
                }
            }
            this.tempObj = test3.join('')
        }
    }
}
</script>
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐