一起学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. Mysql 备份数据库方法及when using LOCK TABLES错误解决方法

    可以将以下代码保存为backup.bat,添加计划任务即可. @echo off ,,%" ,%" "D: -uname -pxxxx -P3306 --skip-loc ...

  2. 第十四篇 JS实现加减乘除 正则表达式

    JS实现加减乘除 这节课,将会继续使用到if判断,会让同学们再看到一个新的,else if判断语句,意思是:否则如果,是基于if下的判断语句,就是说,if不成立则再来判断else if,可以这样,假如 ...

  3. 无法连接asp.net development server

    我的电脑重装了,在此之前,是可以进行调试的.并且将该解决方案拷到其他机器上能正常打开.并且正常调试.今天刚打开项目调试就提示“无法连接asp.net development server”,后来发现是 ...

  4. centos7.2升级openssh7.9p1

    Centos7.2版本yum升级openssh版本最高到7.4,想要升级到更高的版本需要重新编译 一.查看当前openssh版本: [root@localhost ~]# ssh -VOpenSSH_ ...

  5. eclipse+自己安装的maven不能run as 找不到包

    我本地环境eclipse自带maven但是默认指定的路径是c盘下,本着不想放c盘,就自己下了maven包集成到eclipse中,但是java类中main方法如果调用了maven中的包是找不到的.后类自 ...

  6. 多线程(二)Object类方法、线程的操作sleep()，join()，interrupt()，yield()

    四.Object类简介 Object类是所有类的超类,之所以放在线程部分是因为其方法很多是和线程有关的.比如以下三个: wait()方法.wait(long timeout)和wait(long ti ...

  7. poj2166 Heapsort[构造递推]

    构造一个n个点的大根堆让全部弹出时交换位置次数最多. 真心佩服我自己智商,这种题都做不出来 交换是在每次弹出堆顶,然后把堆尾元素置于堆顶,然后向下调整时产生的.玩样例可以发现似乎数字1每次都出现在堆最 ...

  8. poj3208 Apocalypse Someday[数位DP]

    数位中出现至少3个连续的'6'的数字(称魔鬼数),询问满足要求的排名k的数. 经典题型.采用试填法. 递推做法:预处理出$i$位数字中满足要求的数(下记为'魔鬼数').对每一位都从0到9试一遍,然而卡 ...

  9. chomd添加权限

    chmod 777 -R * 的意思是把当前目录所有文件(递归的)的属性全部为7

  10. php面向对象相关技术

    step1 一个经典类的设计和实例化 <?php class mycoach { public $_name=''; public $_age=''; public $_expert=array ...