vue學習03 v-html

vue學習03v-html

  1. v-html指令的作用是:設置元素的內部html鏈接
  2. 內容有html 的結構會被解析爲標籤
  3. v-text指令無論內容是什麼,只會解析文本
  4. 解析文本使用v-text,需要解析html結構使用v-html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 開發環境版本-->
<script src="js/vue.js"></script>
<body>
    <div id="app">
       <p v-html="content"></p>
       <p v-text="content"></p>
    </div>

    <script>
        var app = new Vue({
            el:"#app",
            data: {
                content:"<a href='https://www.cnblogs.com/ma1998/'>小飛博客園</a>",
            }
           
        })
    </script>
</body>
</html>

兩種效果

v-html能解析出來網址,而v-text不能解析

image-20200925003102642

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章