<!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>