v-text:转义输出

v-html:不转义输出

值得一说的是 如果直接使用{{html}}的话会直接转义

看代码:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue.js 使用 v-text 和 v-html </title>
<script src="vue.js"></script>
</head>
<style>
</style>
<body>
<div id="ask"><!--vue不能控制body和html的标签-->
<div v-html="html"></div><!--不转义输出--> <div v-text="html"></div><!--转义输出-->
</div>
<script>
var app = new Vue({ //实例化vue
el:'#ask',//vue控制id为ask的元素,
data:{
title:'',
html:'<h1 style="color: red">mykeji</h1>'
}
});
</script> </body>
</html>

vue.js 使用 v-text 和 v-html的更多相关文章

  1. Vue.js-----轻量高效的MVVM框架(二、Vue.js的简单入门)

    1.hello vue.js! (1)引入vue.js <script type="text/javascript" src="js/vue.js"> ...

  2. Vue.js-----轻量高效的MVVM框架(一、初识Vue.js)

    1.什么是Vue.js? 众所周知,最近几年前端发展非常的迅猛,除各种框架如:backbone.angular.reactjs外,还有模块化开发思想的实现库:sea.js .require.js .w ...

  3. vue.js 实战 todo list

    vue.js 起源 vue.js 的作者是尤雨溪,是一名中国人,之前在谷歌工作,现在在全职维护 vue 项目. vue.js 是 2014 年推出来的.现在已经更新到 2.x 版本,3.0 版本会在 ...

  4. JS框架_(Vue.js)带有星期日期的数字时钟

    百度云盘 传送门 密码:tv1v 数字时钟效果: <!doctype html> <html> <head> <meta charset="utf- ...

  5. 在js或css后加?v= 版本号不让浏览器缓存

    客户端会缓存css或js文件,改变版本号,客户端浏览器就会重新下载新的js或css文件,在js或css后加?v= 版本号的用法如下 代码如下: <span style="font-si ...

  6. Vue.js 入门指南之“前传”(含sublime text 3 配置)

    题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴 ...

  7. vue.js双向绑定之--select获取text

    在大多数情况下select下拉菜单都是value和text设置不同的值的,value一般来说是与后台交互的值,而text是前端用来显示的文本: 但是,vue.js对到表单的双向绑定时如果option设 ...

  8. vue的使用与安装 npm -v报错

    1.先将node从官方文档下载下来,然后进行安装. 安装成功后,在dos命令中node -v.npm -v来测试,如果成功就可以安装cnpm(国内淘宝镜像比较快).这里我遇到一个bug,npm -v压 ...

  9. 安装了Node.js 从VScode 使用node -v 和 npm -v等命令却无效

    前言 最近写TypeScript需要安装.配置Node.js环境,楼主是使用的安装包所以环境变量都是自动就配好了(如果是下载的zip压缩包解压后要自己配置到系统环境变量中).打开系统终端敲入命令 no ...

  10. node.js安装后输入“node -v”提示'node' 不是内部或外部命令,也不是可运行的程序的解决方法

    换个电脑,重新搭配环境的时候遇到的问题.node.js已经在官网进行下载安装了,但是VScode里面显示不是内部的命令,也不是可运行的程序 但是在cmd控制台还是能查到的 借助网上的方法进行了测试和调 ...

随机推荐

  1. Goldbach`s Conjecture(LightOJ - 1259)【简单数论】【筛法】

    Goldbach`s Conjecture(LightOJ - 1259)[简单数论][筛法] 标签: 入门讲座题解 数论 题目描述 Goldbach's conjecture is one of t ...

  2. js如何手写一个new

    手写new 看一下正常使用new function Dog(name){ this.name = name } Dog.prototype.sayName = function(){ console. ...

  3. CF 704 D. Captain America

    CF 704 D. Captain America 题目链接 题目大意:给出\(n\)个点的坐标,你要将每个点染成红色或者蓝色.染一个红色要付出\(r\)的代价,染一个蓝色要付出\(b\)的代价.有\ ...

  4. java 连缀用法

    连缀用法,即是在实例化对象时,同时为对象的属性设值. 如示例所示,在创建对象时,同时调用属性的设值函数,为属性赋值 Apple apple = new Apple() .setColor(" ...

  5. CAT 默认密码修改

    修改操作 1.按照如下路径,打开SessionManager类,cat-home目录下:com.dianping.cat.system.page.login.service.SessionManage ...

  6. vsto 以隐藏的方式打开一个excel 文件 并获得excel文件的缩略图

    public byte[] GetExcelPictureFile(string filepath) { Workbook workbook=null; Microsoft.Office.Intero ...

  7. 关于EFCore线程内唯一

    EntityFramework的线程内唯一 EntityFramework的线程内唯一是通过httpcontext来实现的 public static DbContext DbContext() { ...

  8. Linux软件安装——服务管理的命令

    Linux软件安装——服务管理的命令 摘要:本文主要学习了Linux系统中服务管理的命令. service命令 service命令用于对系统服务进行管理,比如启动(start).停止(stop).重启 ...

  9. Docker关于镜像、容器的基本命令

    镜像 1.获取镜像 docker pull 服务器:端口/仓库名称:镜像 ➜ ~ docker pull python Using default tag: latest 2.查看镜像信息 列出本机所 ...

  10. MVC 身份证图像识别(调用dll)

    源码下载 -> 提取码 QQ505645074 Index.cshtml <!DOCTYPE html> <html> <head> <meta cha ...