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