vuejs 復(fù)選框問(wèn)題

我有個(gè)比較拙劣的想法 代碼如下：

<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可以實(shí)現(xiàn) 這是效果圖

題主你得明白這里面的原理。

{{message}} 意味著將 message 這個(gè)對(duì)象輸出到 DOM 里，因?yàn)樗念愋筒还潭ǎ匀灰?jīng)過(guò)轉(zhuǎn)換。這里你用的是復(fù)選框，所以 message 就會(huì)是一個(gè)數(shù)組，所以上面輸出就會(huì)帶有 []。接下來(lái)你的 value 是香蕉蘋(píng)果這樣的表情符號(hào)，JS 會(huì)把它當(dāng)文本處理，所以輸出的自然帶有引號(hào)。

你想輸出不帶括號(hào)引號(hào)，就要避免自動(dòng)轉(zhuǎn)換。所以模板里改成這樣既可：

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