vue中的属性绑定v-bind与展示html内容的v-html的使用

 先看一个简单例子:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

<html>

<head>

<meta charset="utf-8">

<title>无标题文档title>

<script src="vue.js">script>

head>

<body >

    <div id="vue-app">

        <p>

            <h2>属性绑定v-bind的使用h2>

            <div>

                1.错误写法:

                <a href="{{url}}">乐之者javaa>

            div>

            <div>

                2.正确写法:

                <a v-bind:href="url">乐之者javaa>

            div>

        p>

        <p>

            

            <div>

                1.错误写法:

                {{url2}}

            div>

            <div>

                2.正确写法

                <span v-html="url2">span>

            div>

        p>

    div>

body>

<script>

    var options={

        el:"#vue-app",

        data:{

            url:"http://www.roadjava.com/",

            url2:"<a href='http://www.roadjava.com/'>乐之者java官网a>"

        }

    }

    new Vue(options);

script>

html>

执行结果:

vue中的属性绑定v-bind与展示html内容的v-html的使用_第1张图片

解释:

    在属性绑定的时候,我们不能像前边那样直接使用{{vue变量名}}的方式来获取属性的值,而是需要通过"v-bind:html标签属性名="vue变量名""的格式来获取。

    当vue变量的值是html的时候我们通过前边“{{vue变量名}}”的格式获取的时候直接就是原样输出vue变量的值,并不进行html标签的解析,此时需要使用v-html标签来让vue解析含有html的vue变量。

你可能感兴趣的:(前端)