v-html的使用

简介: v-html的使用

v-html的使用

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
    <div id="app" v-html="url"></div>
    <h1 id="htext" v-text="url"></h1>
    <p id="ptext" v-pre>{{val}}</p>
    <script src="../vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                url: "<a href='http://www.baidu.com'>百度一下</a>"
            }
        })
        const app1 = new Vue({
            el: '#htext',
            data: {
                url: "<a href='http://www.baidu.com'>百度一下</a>"
            }
        })
        const app2 = new Vue({
            el: '#ptext',
            data: {
                val: "hhhh"
            }
        })
    </script>
</body>
</html>
目录
相关文章
|
4月前
|
移动开发 前端开发 JavaScript
HTML
【10月更文挑战第14天】HTML
39 4
|
3月前
|
移动开发 UED HTML5
HTML53
HTML5表单引入了新表单元素、新属性、新输入类型及自动验证功能,提升了用户体验和开发效率。同时,HTML5移除了如 `&lt;acronym&gt;`、`&lt;applet&gt;` 等多个HTML 4.01中的元素,简化了网页结构。
|
7月前
|
移动开发 SEO HTML5
HTML4(一)
HTML4(一)
31 0
|
9月前
|
前端开发 搜索推荐
html的常用技巧
【4月更文挑战第1天】html的常用技巧
31 2
|
前端开发
HTML详解连载(7)
HTML详解连载(7)
|
9月前
|
弹性计算 前端开发 容器
HTML详解连载(8)
HTML详解连载(8)
|
9月前
|
存储 移动开发 缓存
html5
html5
49 4
|
9月前
|
存储 移动开发 API
HTML5
HTML5
52 0
|
存储 移动开发 前端开发
HTML 总结
HTML 总结
108 0