首页 > Web开发 > 详细

Vue基本指令 v-text&v-html

时间:2021-06-09 17:56:39      阅读:21      评论:0      收藏:0      [点我收藏+]

v-text

v-text 指令主要用来编辑标签中的文本,传入的值默认是 string 类型,我们也可以添加其他类型变量,或者是表达式和函数

<h1 v-text="str"></h1>
<!-- string类型 -->
<h1 v-text="num"></h1>
<!-- number类型 -->
<h1 v-text="bool"></h1>
<!-- boolean类型 -->
<h1 v-text="str + num"></h1>
<!-- 表达式 -->
<h1 v-text="text(1, ‘00‘)"></h1>
<!-- 函数 -->

在 CodeSendBox 上尝试

v-text 不能编译 html 代码,只能输入固定的值,它会把模板字符串的内容以字符串的形式在双标签中打印出来

<div v-text="test()"></div>
test() {
  return `
    <h1>输入框</h1>
    <input type="text">
  `;
},

在 CodeSendBox 上尝试

使用 v-text 时,v-text 传入的内容会替换 DOM 元素的所有子元素

<div v-text="str">
  <h1>这是一个h1标签</h1>
</div>

在 CodeSendBox 上尝试

v-html

v-text 能做的 v-html 都能做,v-html 指令主要用来在标签中编译 html 代码,通过 v-html 指令,我们可以把 DOM 的模板字符串编译进双标签之间

<div v-html="test()"></div>
test() {
  return `
    <h1>输入框</h1>
    <input type="text">
  `;
},

在 CodeSendBox 上尝试

Vue基本指令 v-text&v-html

原文:https://www.cnblogs.com/Function-cnblogs/p/14838543.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!