怎样使用 v-html 指令

lxf 2021年03月09日编程语言 436 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源码网 jquery 前端

微信公众号号：IT虾米（左侧二维码扫一扫）欢迎添加！

Q : 823053937

热贴推荐

怎样使用 v-html 指令