前端常见问题
选课中心 APP下载
当前位置:首页 > 技能类 > 前端 > 常见问题 > v-text和v-html的区别

v-text和v-html的区别

更新时间:2020-09-08 03:13:40 来源: 阅读量:

【摘要】 v-text和v-html的区别考必过小编为大家整理了关于v-text和v-html的区别的信息,希望可以帮助到大家!

v-text和v-html的区别

标签:sageascripmessagecellsapp指令elementaci

 一、v-text

用于渲染普通文本,无论何时,绑定的数据对象上msg属性发生了改变,插值处的内容都会更新。

1

2

3

<span v-text="message"></span>

<!-- 简写方式 -->

<span>{{message}}</span>

exportdefapt{ data () {return{ message:"这里可以包含html标签"} } }

 二、v-html

 如果你想输出真正的 HTML,你需要使用v-html指令,v-text仅渲染标签,不能解析 HTML 代码。

1

2

3

4

5

6

7

8

9

<p v-text=“message”></p> <br> <p v-html="message"></p>

<script type="text/javascript">

varapp =newVue({

el:‘#app‘,//element

data: {

message:‘<strong>Hello</strong> Vue!‘,

}

})

</script>

v-text展示效果: <strong>Hello</strong> Vue!

v-html展示效果:HelloVue!

总结:v-text和{{}}表达式渲染数据,不解析标签。

   v-html不仅可以渲染数据,而且可以解析标签。

v-text和v-html的区别

标签:sageascripmessagecellsapp指令elementaci

以上就是v-text和v-html的区别的内容,更多资讯请及时关注考必过网站,最新消息小编会第一时间发布,大家考试加油!

分享到: 编辑:liuying