<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>练习vue(class,style属性)</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script src="js/vue.js"></script> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/bootstrap.min.js"></script> <script> window.onload = function() { let vm = new Vue({ el: "#itany", data: { bb: 'aa', dd: 'cc' } }); } </script> <style> .aa { color: red; font-size: 20px; } .cc { background-color: #ccc; } </style> </head> <body> <div id="itany"> <!--<p v-bind:class="aa">今天天气真棒！</p>--> <!--<p :class="aa">今天天气真棒！</p>--> <!--方式1：变量形式--> <!--<p v-bind:class="bb">今天天气真棒！</p>--> <!--方式2：数组形式--> <!--<p v-bind:class="[bb,dd]">今天天气真棒！</p>--> <!--方式3：json形式 <p v-bind:class="{aa:true}">今天天气真棒！</p>--> </div> </body> </html>