vue.js使用v-pre與v-html輸出HTML操作示例
更新時(shí)間：2018年07月07日 15:25:11 作者：_code小學(xué)生
這篇文章主要介紹了vue.js使用v-pre與v-html輸出HTML操作,結(jié)合實(shí)例形式分析了vue.js基于v-pre與v-html屬性輸出HTML的具體操作技巧,需要的朋友可以參考下
本文實(shí)例講述了vue.js使用v-pre與v-html輸出HTML操作。分享給大家供大家參考，具體如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>www.fzitv.net vue.js輸出HTML</title>
<!-- Vue.js -->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--# 如果想顯示{{ }}標(biāo)簽，而不進(jìn)行替換，使用v-pre即可調(diào)過(guò)這個(gè)元素和它的子元素的編譯過(guò)程 #-->
<span v-pre>{{ 這里的內(nèi)容不會(huì)被編譯 }}</span>
<span v-html="link"></span>
</div>
</body>
</html>
<script>
var myData = {
link:'<a href="#" rel="external nofollow" >這是一個(gè)連接</a>'
};
var app = new Vue({
el:'#app',
data:myData
})
</script>
使用本站HTML/CSS/JS在線運(yùn)行測(cè)試工具：http://tools.jb51.net/code/HtmlJsRun，可得到如下測(cè)試運(yùn)行效果：
希望本文所述對(duì)大家vue.js程序設(shè)計(jì)有所幫助。
相關(guān)文章
vscode搭建vue環(huán)境完整圖文教程(適合新手小白)
Vue框架的優(yōu)秀設(shè)計(jì)和強(qiáng)大的生態(tài)系統(tǒng)成為了越來(lái)越多開(kāi)發(fā)者選擇Vue的原因,在實(shí)際項(xiàng)目過(guò)程中一個(gè)高效的開(kāi)發(fā)環(huán)境能夠大大提高開(kāi)發(fā)效率,這篇文章主要給大家介紹了關(guān)于vscode搭建vue環(huán)境的相關(guān)資料,需要的朋友可以參考下2023-10-10
在如今，很多網(wǎng)頁(yè)已經(jīng)可以手動(dòng)切換明亮模式和黑暗模式，網(wǎng)頁(yè)的主題切換已經(jīng)成為了一個(gè)常用的需求，因此，本文將從常見(jiàn)框架的處理方式總結(jié)一些相關(guān)的操作，對(duì)vue?ui框架主題切換功能感興趣的朋友跟隨小編一起看看吧2022-12-12
Vue入門(mén)之?dāng)?shù)量加減運(yùn)算操作示例
這篇文章主要介紹了Vue入門(mén)之?dāng)?shù)量加減運(yùn)算操作,結(jié)合實(shí)例形式分析了vue.js基本數(shù)值運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
ant-design-vue動(dòng)態(tài)表格合并案例
這篇文章主要介紹了ant-design-vue動(dòng)態(tài)表格合并案例，文章圍繞主題通過(guò)案例詳解展開(kāi)相關(guān)內(nèi)容，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-08-08
Element?Table行的動(dòng)態(tài)合并及數(shù)據(jù)編輯示例
這篇文章主要為大家介紹了Element?Table行的動(dòng)態(tài)合并及數(shù)據(jù)編輯示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Vue組件內(nèi)部實(shí)現(xiàn)一個(gè)雙向數(shù)據(jù)綁定的實(shí)例代碼
這篇文章主要介紹了Vue組件內(nèi)部實(shí)現(xiàn)一個(gè)雙向數(shù)據(jù)綁定的實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
簡(jiǎn)單了解Vue + ElementUI后臺(tái)管理模板
這篇文章主要介紹了簡(jiǎn)單了解Vue + ElementUI后臺(tái)管理模板,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-04-04
在Vue中，組件是構(gòu)建頁(yè)面的基本單位。通過(guò)組件化開(kāi)發(fā)，可以提高代碼的復(fù)用性和可維護(hù)性。組件的注冊(cè)方法包括全局注冊(cè)和局部注冊(cè)兩種方式。同時(shí)，需要注意組件名的命名規(guī)范、組件選項(xiàng)的定義方式、組件之間的通信等問(wèn)題，以實(shí)現(xiàn)更好的組件復(fù)用和開(kāi)發(fā)效率2023-05-05
vue init webpack myproject構(gòu)建項(xiàng)目 ip不能訪問(wèn)的解決方法
下面小編就為大家分享一篇vue init webpack myproject構(gòu)建項(xiàng)目 ip不能訪問(wèn)的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Vue3將虛擬節(jié)點(diǎn)渲染到網(wǎng)頁(yè)初次渲染詳解
這篇文章主要為大家介紹了Vue3將虛擬節(jié)點(diǎn)渲染到網(wǎng)頁(yè)初次渲染詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03