【Vue】输出基础的html元素

作者: 德育处主任 | 来源:发表于2019-02-28 22:38 被阅读1次
微信订阅号:Rabbit_svip

本节关键字:v-html

我们知道,可以用v-bind这种方式给元素绑定动态属性。

也可以用 {{ }} 这种双花括号的方式来渲染内容。

但如果需要输出 html 元素,以上这两种方法都不太好使。



v-bind

微信订阅号:Rabbit_svip 微信订阅号:Rabbit_svip

上面这样写,链接是有效的。



html模板

微信订阅号:Rabbit_svip
微信订阅号:Rabbit_svip

定义了一个 finsishedLink,里面写的是一个a标签。

但如果用html模板的方式输出,会输出字符串,并不是我们理想中的效果。



如果需要输出一个 html 元素,可以用** v-html**

微信订阅号:Rabbit_svip 微信订阅号:Rabbit_svip

可以看到,a标签完美输出,而且包裹在div标签里面。


但用 v-html 很容易受到跨站脚本攻击(XSS攻击)。

谨慎使用~~

相关文章

  • 【Vue】输出基础的html元素

    本节关键字:v-html 我们知道,可以用v-bind这种方式给元素绑定动态属性。 也可以用 {{ }} 这种双...

  • Vue使用v-html输出的样式无法更改

    Vue渲染到html元素的数据时使用v-html输出解析 下面json的数据 在vue中输出label或title...

  • Vue的其他指令与路由

    1.Vue的其他指令 1.v-text 输出渲染后的值2.v-html 输出解析HTML元素后的值3.v-once...

  • html 基础知识

    最近要用vue.js 顺便回顾了一下上学那会学的html. HTML基础 页面基本结构 文本标签 html 元素必...

  • 文本渲染的三种方法

    1、{{ }} 将元素当成纯文本输出 2、v-html 将元素当成HTML标签解析后输出(用于后台输出html标签...

  • vue1:v-html指令

    vue的v-html指令用来输出html代码 new Vue({ el:"#app", data:...

  • 1小时入门Vue

    Vue基础语法 输出hello world 首先在一个标准html中创建一个vue.js,然后引入,最终代码如下:...

  • Vue输出字符标签

    {{ }} 将元素当成纯文本输出 v-htmlv-html会将元素当成HTML标签解析后输出 v-textv-te...

  • vue 自定义指令 实例集合

    含义:指令本质上是装饰器,是 vue 对 HTML 元素的扩展,给 HTML 元素增加自定义功能。vue 编译 D...

  • vue核心

    初识Vue 搭建基础框架 初识Vue