vuejs 复选框问题

Question

代码是使用 vuejs 的 v-model 绑定了多选框，但是页面上总是显示一个中括号"[]"，请教如何去掉这个呢"[]"呢？
还有就是选择之后的效果，如何去掉引号、逗号、中括号呢

Answer 1

题主你得明白这里面的原理。

{{message}} 意味着将 message 这个对象输出到 DOM 里，因为它的类型不固定，自然要经过转换。这里你用的是复选框，所以 message 就会是一个数组，所以上面输出就会带有 []。接下来你的 value 是香蕉苹果这样的表情符号，JS 会把它当文本处理，所以输出的自然带有引号。

你想输出不带括号引号，就要避免自动转换。所以模板里改成这样既可：

<div class="message">
  <template v-for="item in message">
    {{item}}
  </template>
</div>

Answer 2

我有个比较拙劣的想法 代码如下：

<div id="app">

    <p v-html="amessage"></p>
    <input type="checkbox" value="pingguo" v-model="message">
    <input type="checkbox" value="xiangjiao" v-model="message">
    <input type="checkbox" value="chengzi" v-model="message">

</div>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                message: []
            }
        },
        computed: {
            amessage: function () {
                let obj = ''
                this.message.forEach(function (item) {
                    console.log(item)
                    obj = obj + " " + item
                })
                return obj
            }
        }
    })
</script>

使用computed可以实现 这是效果图