vue樣式的動態繫結
阿新 • • 發佈：2018-12-11
true顯示樣式，flase不顯示
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue的樣式繫結</title> 6 <style type="text/css"> 7 .active{ 8 background-color: gold; 9 color:blue; 10 } 11 12 </style> 13<script type="text/javascript" src="./js/vue.js"></script> 14 <script type="text/javascript"> 15 16 window.onload = function(){ 17 18 var app = new Vue({ 19 el:"#a", 20 data:{ 21 //啟用 false 22 isactive:true 23 }24 25 }); 26 } 27 28 </script> 29 30 </head> 31 <body> 32 33 <div id="a">人生最棒的是不後悔 34 <div v-bind:class="{ active:isactive }" style="width: 200px"> 35 人生最難的是不留遺憾 36 </div> 37 </div> 38 39 </body> 40 </html>