Vue指令v-html

目录

  • 一、Vue中的v-html指令是什么?
  • 二、v-html指令与v-text指令的区别?

一、Vue中的v-html指令是什么?

v-html指令的作用是:设置元素的innerHTML,内容中有html结构会被解析为标签。

二、v-html指令与v-text指令的区别?

v-text指令是无论内容是什么都只会将其解析为文本,解析文本使用v-text和v-html的效果一样,但当需要解析html结构时要使用v-html。

1、案例源代码如下:

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>

<body>
  <div id="appid">
    
    1、解析文本示例
    <p v-text = "school">p>    
    <p v-html = "school">p> 
    <br>
    2、解析html结构示例
    <p v-text = "href">p>    
    <p v-html = "href">p> 
  div>
  <script>
    var app = new Vue({
      el: '#appid',
      data: {
        school: "振华中学",
        href: "CSDN-Vue简介"
      }
    })
  script>
body>

html>

2、代码执行效果如下:
Vue指令v-html_第1张图片

你可能感兴趣的:(Vue2.x,vue.js,前端,经验分享)