Vue中直接在标签中引用数组如何不带中括号

浮生若梦777

已于 2024-01-26 22:44:08 修改

阅读量690

点赞数 20

分类专栏：前端(Vue/Javascript) 文章标签： vue.js javascript 前端 vue

于 2024-01-22 23:44:30 首次发布

本文链接：https://blog.csdn.net/qq_58626489/article/details/135760903

版权

前端(Vue/Javascript) 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

问题：今天在练习input复选框时，将勾选的数据绑定在数组中checked中，直接引用后在显示的时候是以数组的形式展示的带着中括号，用replace方法去掉[]又太麻烦。

解决方法

不再直接引用，采用v-html的展示方式<p>你选择的：<span v-html="checked"></span></p>，同样也是响应式的，就能够正常展示了。

<body>
    <div id="app">
        <p id="ww">你选择了：{{checked}}</p>
        <input type="checkbox" v-model="checked" value="西瓜" @change="change">西瓜
        <input type="checkbox" v-model="checked" value="香蕉" @change="change">香蕉
        <input type="checkbox" v-model="checked" value="葡萄" @change="change">葡萄
        <input type="checkbox" v-model="checked" value="哈密瓜" @change="change">哈密瓜
        <p>你选择的：<span v-html="checked"></span></p>
    </div>


    <script>
        const app = {
            data() {
                return {
                    checked: [],
                }
            },
            methods: {
                change(e) {
                    console.log(e.target.checked)
                    console.log(this.checked)
                }
            }
        }
        Vue.createApp(app).mount('#app')
    </script>
</body>