IT源码网

怎样使用 v-html 指令讲解

lxf 2021年03月09日 编程语言 189 0

v-html 可以在目标节点位置内部插入 html 子节点, 跟节点的 .innerHTML 属性类似, 使用方法如下: 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> 
  <title>Vue Test</title> 
</head> 
<body> 
    <div id="app" v-html="child"></div> 
    <script> 
        var vApp = new Vue({ 
            el: "#app", 
            data: { 
                child: "<span><em>Hello, World!</em></span>" 
            } 
        }) 
    </script> 
</body> 
</html>

 

注意, v-xxx 这种 指令 的数据绑定不是双花括号, 而是 ="", 可以理解为是给 html 标签 增加的特殊的 属性.

发布评论
IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

怎样使用构造函数: Vue()讲解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。