vue學習03 v-html
vue學習03v-html
- v-html指令的作用是:設置元素的內部html鏈接
- 內容有html 的結構會被解析為標籤
- v-text指令無論內容是什麼,只會解析文本
- 解析文本使用v-text,需要解析html結構使用v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!-- 開發環境版本-->
<script src="js/vue.js"></script>
<body>
<div id="app">
<p v-html="content"></p>
<p v-text="content"></p>
</div>
<script>
var app = new Vue({
el:"#app",
data: {
content:"<a href='//www.cnblogs.com/ma1998/'>小飛部落格園</a>",
}
})
</script>
</body>
</html>
兩種效果
v-html能解析出來網址,而v-text不能解析