完整可运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 插值表达式 -->
{{ message }}
<p id="test">
{{ message }}
</p>
<!-- 动态属性 -->
<p :id="dynamicId">
{{ message }}
</p>
<p>{{ number }}</p>
<p>{{ number + 1 }}</p>
<!-- 表达式 -->
<p>{{ flag ? 'yes' : 'no'}}</p>
<p>{{ message.split('').reverse().join('') }}</p>
<!-- 不是表达式 -->
<!-- <p>{{ var a = 1 }}</p> -->
<div v-html="html1"></div>
<div v-html="html2">
<p> 原有元素被覆盖 </p>
</div>
<!-- xss 攻击 -->
<div v-html="html3"></div>
</div>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
dynamicId: Math.random(),
number: 1,
flag: true,
html1: "<p> tao1 </p>",
html2: "<h1> tao2 </h1>",
html3: "<img src=123 onerror=alert(1)>",
}
})
</script>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。