更新元素的innerHTML,不会作为vue模板编译,可用组件来代替。

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

 <div id="app" v-html="msg">原内容</div>
 <script>
   var app = new Vue({
     el:'#app',
     data:{
       msg:'现内容'
     }
   })
 </script>

输出内容:

vue指令v-html示例解析的更多相关文章

  1. vue指令详解和自定义指令

    在vue中,指令以v-开头,是一种特殊的自定义行间属性,指令的职责就是其表达式的值改变时相应地将某些行为应用到DOM上 指令使用的示例 在下面的运行结果中可以看到,v-html是可以解析html标签的 ...

  2. vue指令总结(二)

    一.vue指令 1.v-text v-text是用于操作纯文本,它会替代显示对应的数据对象上的值.当绑定的数据对象上的值发生改变,插值处的内容也会随之更新.注意:此处为单向绑定,数据对象上的值改变,插 ...

  3. Vue框架(二)——Vue指令(v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令)、todolist案例、Vue实例(计算、监听)、组件、组件数据交互

    Vue指令 1.v-once指令  单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...

  4. vue指令及组件

    复习 """ vue: 为什么选择vue - 综合其他框架优点,轻量级,中文API,数据驱动,组件化开发,数据的双向绑定,虚拟DO 渐进式js框架 - 选择性控制 - 创 ...

  5. 第三篇:Vue指令

    Vue指令 1.文本指令相关 v-*是Vue指令,会被vue解析,v-text="num"中的num是变量(指令是有限的,不可以自定义) v-text是原样输出渲染内容,渲染控制的 ...

  6. vue 指令,成员,组件

    目录 复习 v-once指令 v-cloak指令(了解) 条件指令 v-pre指令(了解) 循环指令 todolist留言板案例 实例成员 - 插值表达式符号(了解) 计算属性 属性监听 组件 局部组 ...

  7. vue指令,实例成员,父子组件传参

    v-once指令 """ v-once:单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) """ <di ...

  8. 02 Vue指令

    Vue指令 1.文本相关指令 <div id="app"> <!-- 插值表达式 --> <p>{{ msg }}</p> < ...

  9. Vue(4)Vue指令的学习1

    前言 Vue官网一共有提供了14个指令,分别如下 v-text v-html v-show v-if ☆☆☆ v-else ☆☆☆ v-else-if ☆☆☆ v-for ☆☆☆ v-on ☆☆☆ v ...

  10. 【vuejs深入一】深入学习vue指令,自定义指令解决开发痛点

    写在前面  一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. 最近博主我沉淀了几个月,或者说懒了几个月.然而大佬的指点总是一针见血,能够让人看到方向.所以我现在有觉得,一个好的 ...

随机推荐

  1. Jenkins构建本地项目到服务器上自动部署的方法

    博主原创,转载请注明. 最近在用Jenkins做项目的自动部署,由于项目需求,现在要在本地构建后再放到Tomcat里.以下是本地构建步骤: 名称填写好,下面的选项是可选的. 源码管理这里选择none. ...

  2. 通过ant-jmeter读取jtl文件拆分数据并insert DB

    前言:之前详解过通过jmeter生成的csv文件,解析csv存入DB,这个有弊端 第一:需独立创建一个job 第二:需按照一定规范输出 因此,放弃解析csv方式,直接解析自动化生成的原始jtl文件并集 ...

  3. AppDelegate减负之常用三方封装 - 友盟推送篇

    之前分享过集成友盟推送的方法, 需要的朋友可以查看一下链接: http://www.cnblogs.com/zhouxihi/p/6533058.html 一般开发中我们比较多使用的三方有友盟推送, ...

  4. Spring Boot1.5.4 AOP实例

    原文:https://github.com/x113773/testall/issues/12 1. 还是首先添加依赖(使用当前springboot的默认版本)```<dependency> ...

  5. hasOwnProperty的用法

    判断一个属性倒底是在原型中,还是在实例中 hasOwnProperty() 来个栗子 function Person(){ }; Person.prototype.name = "hezhi ...

  6. ActiveMQ 503错误

    问题描述: 在Linux系统下安装ActiveMQ,启动服务 正常启动后,通过浏览器进行访问 可以正常显示home页面,但是点击其他菜单,如Queues,Topics等,都会出现503错误,如图 问题 ...

  7. Angular--ui-router的使用

    先引用Angular然后引用ui-router 路由清单:我们依赖的ui.router中提供了一个服务$state,此时可以用config来配置这个服务.用$stateProvider的state方法 ...

  8. js 数组里求最大值和最小值

    // 数组里相邻两个数做比较 取满足条件的那个(以此类推) var arr = [1,3,4,5,6,7]; function Max(array){ var max = array[0]; for( ...

  9. 处理文本,提取数据的脚本-主要就是用sed

    处理文本,提取数据的脚本 #! /bin/sh | sed 's/)<\/small><\/td><td>/\n/g' # 用换行符替换 # 删除带有分号的行 # ...

  10. C3制作导航栏分割线及立体风格

    //首先写一个导航栏样式 .nav{    width:560px;    height: 50px;    font:bold 0/50px Arial;    text-align:center; ...