v-html 解析并插入 html 标签

news/2024/7/10 1:22:18 标签: v-html, vue

1. 双大括号会将数据解释为普通文本,而非 HTML 代码。

<div id="app">  

<p id="a">Using mustaches: {{ rawHtml }}</p>
<p >Using v-html directive: </p>

</div>

<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!--引入vue js 外部文件-->
<script> //vue js 代码写在这里

var a=new Vue({
el:"#app",                 //绑定的元素
data:{ rawHtml:'<span style="color:red">利用vue添加了插入一个span 元素</span>'  //元素内数据代码 message
}
});

</script>

这里的 rawHtml 属性值为 <span style="color:red">利用vue添加了插入一个span 元素</span>, 网页直接显示为普通文本,

网页效果:

 2. 为了输出真正的 HTML,你需要使用 v-html 指令。

<div id="app">  

<p id="a" v-html="rawHtml">Using mustaches: {{ rawHtml }}</p>
<p >Using v-html directive: </p>

</div>

<p v-html="rawHtml">,元素绑定 v-html 指令后,解析了 rawHtml 的值里面的 <span> 标签,

网页效果:


http://www.niftyadmin.cn/n/1529075.html

相关文章

<context:component-scan/>与<context:annotation-config/>

前面我们使用Autowired、Resource、Value等自动装配注解时用&#xff1c;context:annotation-config/&#xff1e;进行注解驱动注册&#xff0c;从而使注解生效。实际上这样&#xff1c;context:annotation-config/&#xff1e;一条配置&#xff0c;它的作用是式地向 Spring 容…

spring之AOP基本概念和配置详解

Spring&#xff08;六&#xff09;spring之AOP基本概念和配置详解 2014年08月21日 14:20:22 阅读数&#xff1a;1173 首先我们来看一下官方文档所给我们的关于AOP的一些概念性词语的解释&#xff1a; 切面&#xff08;Aspect&#xff09;&#xff1a;一个关注点的模块化&am…

jquery实现页面刷新后保留鼠标点击addclass的样式

方法&#xff1a;[javascript] view plaincopy<span style"font-size:18px;">$(ul.main-menu li a).each(function(){ if($($(this))[0].hrefString(window.location)) $(this).parent().addClass(active); });</span> 实际项目中经过修…

vue 的响应式是什么意思/ Object.freeze( ) 阻止数据响应

<p id"inpChange"> vue实例创建后&#xff0c;弹出窗口: newV.messagedata.message </p><script src"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script>//创建数据对象 var data{ message:"good good…

基于Annotation的Spring AOP: @AfterReturning

基于Annotation的Spring AOP: AfterReturning 2013年08月03日 06:20:37 阅读数&#xff1a;7916 AfterReturning 增强处理将在目标方法正常完成后被织入。 使用AfterReturning可指定如下两个属性&#xff1a; ① pointcut / value : 两者都用于指定该切入点对应的切入表达…

jqgrid应用过程中的问题

jqGrid 是一个用来显示网格数据的jQuery插件&#xff0c;通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。文档比较全面&#xff0c;其官方网址为&#xff1a;http://www.trirand.com。一、jqGrid特性&#xff1a; Ajax分页&#xff0c;可以控制每页显示的记录数…

spring的proxy-target-class详解

spring的proxy-target-class详解 2017年08月01日 08:18:16 阅读数&#xff1a;9564 proxy-target-class属性值决定是基于接口的还是基于类的代理被创建。首先说明下proxy-target-class"true"和proxy-target-class"false"的区别&#xff0c;为true则是基…

computed (计算属性) 和 methods (方法) 的区别

methods: vue 里面可以放函数的地方 <div id"div"> <p >{{message}}</p> <button id"btn" v-on:click"change">点击翻译成中文</button> </div><script src"https://cdn.jsdelivr.net/npm/vue/d…