网络日志

【Vue】插值 动态属性 表达式 v-html

完整可运行代码

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