Vue官网学习(模板语法:二、v-html指令)

上节:Vue官网学习(模板语法:一、{{}}双大括号语法说到了双大括号语法,是适用于文本的,他会把内容当成文本,就算是html标签也不例外,但是如果我们的文本是html,又需要有样式,该如何渲染呢?

1、v-html指令来了

使用v-html修饰的元素,他会对其内容进行解析,并且已html的样式进行输出。
写法:v-html=“rawHtml”,其中rawHtml是Vue实例中data属性的变量名:


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>双大括号语法title>
head>
<body>
  <div id="app">
    <div v-html="rawHtml">div>
    <button @click="changeMsg">改变值button>
  div>
body>
<script src="../static/js/Vue.js">script>
<script>
  new Vue({
    el: '#app',
    data: {
      rawHtml: "
我是html
"
}, methods: { changeMsg(){ this.rawHtml = "
我是html
"
} } })
script> html>

rawHtml的内容是带有html标签并且有style的值,我们使用v-html指令来修饰的话,他的结果就会如下:
在这里插入图片描述

你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容使用插值。

官方建议:这样做可能导致SXX攻击,能少用就尽量少用。

你可能感兴趣的:(Vue,JS,ES6)