Vue ⑅：将资料呈现在画面上

Vue Data 呈现于画面上有以下几种方法：

{{ }}：神奇的双大括号v-text：跟神奇大括号一样的效果，但是写在标籤里v-once：绑定的标籤只会在画面上输出一次资料、往后更新也不会更动。v-html：可以同时输出HTML 结构。但是使用上需要注意：在网站上动态渲染任意HTML是非常危险的，因为容易导致XSS攻击。只在可信内容上使用v-html，永不用在用户提交的内容上 ( by 官方文件 )。

　
　

神奇大括号 与 v-text

这个上一篇有提到它们的用法
再複习一次（っ ‘ ᵕ ‘ ｃ）

<div id='app'><p v-text='text'></p><p> {{ text }} </p></div>

new Vue({el: '#app',data: {text: '喵'  // 跟HTML 上的text 绑定}})

当你修改 data. text 的値时，HTML 上文字也会跟着变更。
　

---

v-once

v-once 去査文件都会说「 只印一次，不希望他被更动时使用 」
他的HTML 会写成这样

<div id='app'><p v-once> {{text}} </p></div>

所以我改 data. text 他真的不会被更动吗？

「 会喔！会动喔！ 」
他不是尼想像的那个不会动的意思w

检证：

→　我原本打 喵

→　我改 喵喵喵

他还是会动喔！
那所以他的不想修改的意思是什么呢？

是如果我们在方法methods 内，如果写个要更动text 内容的方法
他还会是原本的 喵 ！

範例：

可以看出 v-once 还是原本的喵
然后 {{ text }} 被修改成 愤怒的猫 。
　

---

v-html

看到html 就知道是 跟html 有关 ( 废话 )
这个 v-html 可以在 data 内定义 html 资料，并写到HTML 上。

讲起来有点饶口，直接看範例～

<div id='app'><!-- 会变成 h2 标籤内 包资料写的 html --><h2 v-html="htmlText"> 在此加入原始 HTML 结构 </h2></div>

var app = new Vue({  el: '#app',  data: {    htmlText: `<p class="text-danger">HTML结构直接写上去拉</p>`,  },});

右键检査可以看到结构变成：

官方文件也有写到的，要注意 v-html 可能会被 XSS攻击
使用上要注意一下哩。

　

以上4 种是 Vue 将资料呈现至画面的语法 ( ❁ᵕᴗᵕ )♡
有误还请多指教 。 じゃあねー