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

乐之者java

于 2020-05-30 20:54:58 发布

阅读量1.7k

点赞数

分类专栏：前端文章标签： vue

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/xiaozhuangyumaotao/article/details/106446820

版权

前端专栏收录该内容

175 篇文章 2 订阅

订阅专栏

先看一个简单例子：

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

<!doctype html>

<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}}">乐之者java</a>

</div>

<div>

2.正确写法:

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

</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标签属性名="vue变量名""的格式来获取。

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

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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.
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。