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.dbjr.com.cn 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)過這個(gè)元素和它的子元素的編譯過程 #-->
<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)文章
這篇文章主要介紹了Vue SPA 如何解決瀏覽器緩存問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細(xì)介紹了vuejs從安裝到搭建的整個(gè)過程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
深入理解Vue-cli搭建項(xiàng)目后的目錄結(jié)構(gòu)探秘
本篇文章主要介紹了深入理解Vue-cli搭建項(xiàng)目后的目錄結(jié)構(gòu)探秘，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07
Vue 設(shè)置axios請(qǐng)求格式為form-data的操作步驟
今天小編就為大家分享一篇Vue 設(shè)置axios請(qǐng)求格式為form-data的操作步驟，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vue2.0實(shí)現(xiàn)導(dǎo)航菜單切換效果
這篇文章主要為大家詳細(xì)介紹了vue2.0實(shí)現(xiàn)導(dǎo)航菜單切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要為大家介紹了Vue?cli3?chainWepack使用方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
Vue兩個(gè)同級(jí)組件傳值實(shí)現(xiàn)
Vue組件之間是有聯(lián)系的，避免不了組件之間要互相傳值，那么如何實(shí)現(xiàn)Vue兩個(gè)同級(jí)組件傳值，本文就來介紹一下，感興趣的可以了解一下2021-07-07
Vue項(xiàng)目引入translate.js國際化自動(dòng)翻譯組件的方法
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目引入translate.js國際化自動(dòng)翻譯組件的相關(guān)資料,除了基本的文本翻譯功能之外,jstranslate還提供了一些高級(jí)功能,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
vue實(shí)現(xiàn)的多頁面項(xiàng)目如何優(yōu)化打包的步驟詳解
這篇文章主要介紹了vue實(shí)現(xiàn)的多頁面項(xiàng)目如何優(yōu)化打包的步驟詳解，文中通過示例代碼以及圖文介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了vue實(shí)現(xiàn)可拖拽div大小的方法,可封裝為全局方法在項(xiàng)目中所需要地方直接調(diào)用（mixins），本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-04-04