代碼示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-html的作用-設置標簽的innerHtml值</title>
</head>
<body>
<!-- v-html指令可以設置標簽的innerHtml屬性，當需要綁定包含html元素文本的數據時使用v-html，否則使用v-text -->
<div id="app">
<p v-html="content"></p>
<p v-text="content"></p>
</div>
<script src="/vue/node_modules/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
data:{
content: "<button onclick='alert(123)'>點擊一下</button>"
}
})
</script>
</body>
</html>
系列目錄
- 初識Vue—你好，Vue
- el屬性的作用—Vue實例的掛載點
- data屬性的作用—為Vue實例掛載點提供數據對象
- v-text的作用—設置標簽的文本值
- v-html的作用—設置標簽的innerHtml值
- v-on的作用—為元素綁定事件
- v-on的實際應用—購物車的計數器
- v-on的補充說明—事件參數的傳遞
- v-show的作用—根據表達式的布爾值切換元素的顯示與隱藏
- v-if的作用—根據表達式的布爾值切換元素的顯示與隱藏（操作dom）
- v-bind的作用—修改元素屬性
- v-bind、v-on、v-show的綜合使用—圖片切換顯示
- v-for的作用—根據數據生成列表結構
- v-model的作用—將表單中的數據與Vue中的數據關聯起來
- v-model綜合應用—簡易筆記本
- Vue組件系統—組件是模塊化的基礎