Vue学习之路第四篇:v-html指令
程序员文章站
2022-06-28 10:52:58
上一篇我们讲解了两种方式,把Vue对象的数据展示在页面上: 1、插值表达式 2、v-text指令 但是如果我们展示的数据包含元素标签或者样式,我们想展示标签或样式所定义的属性作用,该怎么进行渲染,比如展示内容为:
这是一个h1元素内容
。我们先用插值表达式和v-text尝试一下。 运行 ......上一篇我们讲解了两种方式,把vue对象的数据展示在页面上:
1、插值表达式
2、v-text指令
但是如果我们展示的数据包含元素标签或者样式,我们想展示标签或样式所定义的属性作用,该怎么进行渲染,比如展示内容为:<h1>这是一个h1元素内容</h1>。我们先用插值表达式和v-text尝试一下。
<body> <div id="app"> <p v-cloak>{{ msg }}</p> <p v-text="msg"></p> </div> <script type="text/javascript"> var vm = new vue({ el : "#app", data : { msg : "<h1>这是一个h1元素内容</h1>" } }); </script> </body>
运行结果,如下:
结论:插值表达式和v-text指令被直接解析为了字符串元素。对此vue提供了另外一个指令:v-html
<div id="app"> <p v-cloak>{{ msg }}</p> <p v-text="msg"></p> <p v-html="msg"></p> </div> <script type="text/javascript"> var vm = new vue({ el : "#app", data : { msg : "<h1>这是一个h1元素内容</h1>" } }); </script>
运行结果:
成功的解析了标签属性。大家也可以尝试定义样式属性看看,如下:
var vm = new vue({ el : "#app", data : { msg : "<h1 style='color:red'>这是一个h1元素内容</h1>" } });
每天进步一点点!