vue.js 使用 v-text 和 v-html


v-text:轉義輸出

v-html:不轉義輸出

 

值得一說的是 如果直接使用{{html}}的話會直接轉義

 

看代碼:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js 使用 v-text 和 v-html </title>
    <script src="vue.js"></script>
</head>
<style>
</style>
<body>
<div id="ask"><!--vue不能控制body和html的標簽-->
    <div v-html="html"></div><!--不轉義輸出-->

    <div v-text="html"></div><!--轉義輸出-->
</div>
<script>
    var app = new Vue({ //實例化vue
        el:'#ask',//vue控制id為ask的元素,
        data:{
            title:'',
            html:'<h1 style="color: red">mykeji</h1>'
        }
    });
</script>

</body>
</html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM