代码示例
<!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组件系统—组件是模块化的基础