一起学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. typeof,instanceof的区别，扩展知识：显示原型（prototype）与隐式类型（__protot__）

    3.typeof 和instanceof区别 1.typeof 主要用于判断对象类型 console.log(typeof null) //object console.log(typeof unde ...

  2. vue中添加与删除，关键字搜索

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 为什么选择器:last-child有时没有起作用?

    想要有.list样式的最后一个不要下划线.为什么:last-child没有起作用? el:last-child 的匹配规则是:第一步,查找 el 选择器匹配元素的所有同级元素(siblings):第二 ...

  4. 一文搞懂网络知识，IP、子网掩码、网关、DNS、端口号

    网络的基本概念 客户端:应用 C/S(客户端/服务器) B/S(浏览器/服务器) 服务器:为客户端提供服务.数据.资源的机器 请求:客户端向服务器索取数据 响应:服务器对客户端请求作出反应,一般是返回 ...

  5. JS代码格式化

    JS代码格式化也就是规范化,保留必要的换行和缩进使代码阅读起来更容易.团队协同工作时会有相应的标准,大家要保证统一的代码风格,这样在合并代码的时候才不容易出问题.通过快捷键Ctrl+Shift+F进行 ...

  6. zabbix常见错误处理方式

    1.zabbix-server启动失败,我是centos7.4系统,查看/var/log/zabbix/zabbix_server.log日志显示 1516:20180816:195630.755 u ...

  7. zabbix 启到不起来：active check configuration update from [127.0.0.1:10051] started to fail (cannot connect to [[127.0.0.1]:10051]: [111] Connection refused)

    cat /var/log/zabbix_agent_log 查看日记出现报错:active check configuration update from [127.0.0.1:10051] star ...

  8. 08Response

    1.功能:设置响应消息 1. 设置响应行 1. 格式:HTTP/1.1 200 ok 2. 设置状态码:setStatus(int sc) 2. 设置响应头:setHeader(String name ...

  9. spring常用的几个aware bean接口

    BeanNameAware 作用:让Bean获取自己在BeanFactory配置中的名字(根据情况是id或者name). Spring自动调用.并且会在Spring自身完成Bean配置之后,且在调用任 ...

  10. Summer training round2 #3

    A!:                    GTY系列题 B!:莫队加分块  GTY系列题 C!:线段树模拟拓扑排序(把普通的拓扑排序的栈操作改成线段树区间减一,查询区间最右侧的0的位置即可.注意一 ...