一起学vue指令之v-html

一起学 vue指令 v-html 

指令可看作标签属性

某些情况下，我们点击百度搜索下一页，服务器应该就返回下一页的数据页面，包含其他资源链接等。

返回的数据的本质是一个含HTML代码的字符串。

以百度链接为例，如果是链接，它的形式是 <a href="http://www.baidu.com">百度一下</a>

如果我们直接通过{{}}插值输出，由于没有解析，就直接输出包含HTML的字符串，这肯定不符合需求的


未使用v-html

我们希望它先按照HTML格式进行解析，然后再显示对应的内容。

在需要输出的标签容器内使用v-html指令即可解析


使用v-html

v-html的特点：

1.该指令后面的内容是字符串

2.浏览器引擎会先解析字符串的html代码，然后再显示输出剩余内容

一起学vue指令之v-html的更多相关文章

  1. 一起学vue指令之v-text

    一起学vue指令之v-text 一起学 vue指令 v-text  指令可看作标签属性 v-text的功能和v-html很相似,都是在容器标签内控制字符串内容的输出,v-text输出纯文本,而v-ht ...

  2. 一起学vue指令之v-bind

    一起学vue指令之v-bind 一起学 vue指令 v-bind  网页的图片url地址并不是固定写死的,如果写死,每一个活动就改一次图片的url,一个网页有多少张图片,工作量多大? 通常来说,客户端 ...

  3. 一起学vue指令之v-pre

    一起学vue指令之v-pre 一起学 vue指令 v-pre  指令可看作标签属性 浏览器解析引擎遇到vue的插值符号时会自动解析,当你想输出不被解析的纯文本时,可以使用v-pre指令. 未使用v-p ...

  4. 一起学vue指令之v-once

    一起学vue指令之v-once 一起学 vue指令 v-once  指令可看作标签属性 v-once 口该指令后面不需要跟任何表达式(v-for后面接表达式) 口该指令表示元素和组件只渲染一次,不会随 ...

  5. vue指令之v-cloak

    vue指令之v-cloak 一起学 vue指令 v-cloak  指令可看作标签属性 某些情况下可能由于机器性能故障或者网络原因,导致传输有问题,那么浏览器无法成功解析数据,此时浏览器输出的内容就是纯 ...

  6. vue指令详解

    一.vue简绍 1. Vue.js是什么    Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e. 版本分为v1.0 和 v2.0 2.Vue.js的特点 1. 是一个构建 ...

  7. 一起学Vue之样式绑定

    在前端开发中,设置元素的 class 列表和内联样式是基本要求.本文主要讲解Vue开发中,样式列表和内联样式的绑定,仅供学习分享使用,如果有不足之处,还请指正. 概述 Vue操作元素的 class 列 ...

  8. 一起学Vue之模板语法

    概述 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTM ...

  9. 一起学Vue之入门篇

    概述 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...

随机推荐

  1. 禁止ios10双指缩放

    document.addEventListener('gesturestart', function(event) { event.preventDefault(); });

  2. ES6基本常见语法

    特色:写法更加优雅,更加像面像对象的编程,其思想和 ES5 是一致的. 箭头函数.this ES6中可以使用 => 作为函数表达形式,极简风格,参数+ => +函数体. var foo = ...

  3. vue-transition实现加入购物车效果及其他动画效果实现

    vue提供了<transition></transition>和<transition-group></transition-group>实现元素状态的 ...

  4. iOS去掉字符串中的HTML标签的方法

    方法一.NSScanner去除标签 - (NSString *)removeTheHtmlFromString:(NSString *)htmlString { NSScanner * scanner ...

  5. shelve：极其强大的序列化模块

    介绍 数据持久化,就是把数据从内存刷到磁盘上.但是要保证在读取的时候还能恢复到原来的状态.像pickle和json之类的持久化模块基本上无需介绍了,这里介绍两个其他很少用但是功能很强大的模块. dbm ...

  6. 浅析Java泛型

    什么是泛型? 泛型是JDK 1.5的一项新特性,它的本质是参数化类型(Parameterized Type)的应用,也就是说所操作的数据类型被指定为一个参数,在用到的时候在指定具体的类型.这种参数类型 ...

  7. 多线程(三) 同步synchronized

    五.同步 1.锁 多线程程序一般是为了完成一些相同的工作而存在的,因此有时间也会共享一些资源,例如对象.变量等等,此时如果不对各个线程进行资源协调,就会出现一些冲突,从而导致程序功能失效.例如下面的示 ...

  8. Linux perf命令详解及常用参数解析

    perf 相关命令:暂无相关命令 perf是Linux下的一款性能分析工具,能够进行函数级与指令级的热点查找. Perf List利用perf剖析程序性能时,需要指定当前测试的性能时间.性能事件是指在 ...

  9. C++最快获取像素值

    HDC hdc, hdcTemp; RECT rect; BYTE* bitPointer; int x, y; int red, green, blue, alpha; while(true) { ...

  10. 【洛谷P1280】尼克的任务

    题目大意:一个人在时间 [1,N] 内工作,现有 M 个任务,每个任务需要在一段固定的时间区间内完成,任务之间的时间可能有重叠.若当前时间有任务要开始,且人处于空闲状态,则一定要这个人来做,否则这个人 ...