如何使用 v-model 绑定解码 HTML 实体‽

Question

未充分利用且相当不为人知的interrobang（‽，实体

&#8253

）需要重新回归时尚！但 Vue 不允许我将它与我的

v-model

一起使用。

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

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

它只是将值作为字符串输出

'Name&#8253'

。 我们如何展示这个神奇的符号‽

Answer 1

如Vue文档中所述，关于

v-model

：

默认情况下，组件上的

v-model

使用

value

作为 prop，使用

input

作为事件。

由于您需要特定的行为，因此您需要有方法来解码（显示时）和编码（更新时）值，将

v-model

分为

:value

和

@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/[email protected]/he.min.js"></script>

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

Answer 2

我遵循了 Erick Petrucelli 的建议并执行了以下操作。

VueProjectRoot > npm install he --save

Vue 组件文件：

<template>
    <v-textarea v-model.trim="userNote"
                label="My Notes" outlined dense
                append-outer-icon="mdi-content-save"
                @click:append-outer="saveNote"
                rows="2"
    ></v-textarea>
</template>

<script>
import he from 'he/he/';

export default {
 ...
    data() {
        return {
            userNote: 'I don&#039;t have access to them. &lt;a href=&quot;#&quot; onclick=&quot;alert(1)&quot;&gt;&lt;click&lt;/a&gt;',
        }
    },
    methods:{
        decode (value) {
            let decoded = value
            if(value){ decoded = he.decode(value) } ​
            return decoded 
         },
         saveNote(){
             // implement the save action
         }
    }
    ,created(){
    ​   this.userNote = this.decode(this.userNote)
    }
}
</script>

Answer 3

您可以使用浏览器内置的 DOMParser Web API：

const unescaped = new DOMParser()
    .parseFromString(text, 'text/html')
    .documentElement
    .textContent;