vue.js - 如何使用 v-model 绑定(bind)解码 HTML 实体‽

Question

未被充分利用且鲜为人知的 interrobang(‽，实体 ‽)需要重新流行起来!但是 Vue 不允许我将它与我的 v-model 一起使用。

data () {
    return {
        list_name: 'Name&#8253'
   }
}

<input v-model="list_name" type="text">
</input>

它只是将值输出为字符串 'Name‽'。我们如何展示这个神奇的符号‽

Answer 1

如 Vue documentation 中所述关于v-model:

By default, v-model on a component uses value as the prop and input as the event.

因为你需要一个特定的行为，你需要有解码(显示时)和编码(更新时)值的方法，将 v-model 分成 :值 和@input。

因此，您的下一个问题将是如何使用 JavaScript 解码和编码 HTML 实体。有一些方法已经讨论了很多¹次²这里³ .我喜欢 mathiasbynens/he库来做到这一点，所以这里有一个示例代码显示它与 Vue 一起运行:

new Vue({
  el: '#app',
  data () {
    return {
      name: 'Name&#8253'
    }
  },
  methods: {
    encode (value) {
      this.name = he.encode(value)
    },

    decode (value) {
      return he.decode(value)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/he@1.2.0/he.min.js"></script>

<div id="app">
  <input :value="decode(name)" @input="encode($event.target.value)" />
  <p>{{ name }}</p>
</div>