v-html 指令: 双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html 指令。

:在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。只在可信内容上使用 v-html,永不用在用户提交的内容上。

v-text 指令输出元素的文本内容。

两者区别:

<div v-html="element"></div>
<br>
<div v-text="element"></div>

data(){
    return{
      element:'<h3>测试</h3>'
    }
  },

结果:
在这里插入图片描述
v-model: 指令常用于表单 < input >、< textarea > 及 < select > 元素上,创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素,负责监听用户的输入事件更新数据。

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值,而总是在组件的 data 选项中声明初始值。

<input v-model="message" placeholder="请输入">
<p>Message is: {{ message }}</p>

结果:
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐