<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h1>{{msg}}</h1> <p>--------------------</p> <img v-bind:src="imgUrl" v-bind:alt="alt"> <a v-bind:href="site">baidu</a> <p>--------简写------------</p> <img :src="imgUrl" :alt="alt"> <a :href="site">baidu</a> </div> <script src="js/vue.3.2.2.js"></script> <script> // 1、创建Vue的实例对象 const app = Vue.createApp({ data(){//定义数据 return { msg:'你好！', imgUrl:'https://img1.baidu.com/it/u=3333263520,4067079584&fm=26&fmt=auto&gp=0.jpg', alt:'风景', site:'http://www.baidu.com' } } }).mount('#app'); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .red{ color:red; } .f60{ font-size: 60px; } </style> </head> <body> <div id="app"> <h1 class="red">{{msg}}</h1> <p>--------------------</p> <h1 :class="arg1">{{msg}}</h1> <p>--------------------</p> <h1 :class="{red:true,f60:true}">{{msg}}</h1> <h1 :class="getClass1()">{{msg}}</h1> <p>--------------------</p> <h1 class="box" :class="{red:isRed,f60:isF60}">{{msg}}</h1> <button @click="change">切换</button> <p>--------------------</p> <h1 :class="[arg1,arg2]">{{msg}}</h1> <h1 :class="getClass2()">{{msg}}</h1> <p>--------------------</p> <h1 style="font-size: 50px;">{{msg}}</h1> <h1 :style="{fontSize:'50px'}">{{msg}}</h1> <h1 :style="{fontSize:arg3,backgroundColor:'red'}">{{msg}}</h1> <h1 :style="getStyle()">{{msg}}</h1> <p>--------------------</p> <img v-bind:src="imgUrl" v-bind:alt="alt"> <a v-bind:href="site">baidu</a> <p>--------简写------------</p> <img :src="imgUrl" :alt="alt"> <a :href="site">baidu</a> </div> <script src="js/vue.3.2.2.js"></script> <script> // 1、创建Vue的实例对象 const app = Vue.createApp({ data(){//定义数据 return { msg:'你好！', imgUrl:'https://img1.baidu.com/it/u=3333263520,4067079584&fm=26&fmt=auto&gp=0.jpg', alt:'风景', site:'http://www.baidu.com', arg1:'red', arg2:'f60', arg3:'50px', arg4:'red', isRed: true, isF60: false } }, methods:{ change(){ this.isRed = !this.isRed; this.isF60 = !this.isF60; }, getClass1(){ return {red:this.isRed,f60:this.isF60}; }, getClass2(){ return [this.arg1,this.arg2]; }, getStyle(){ return {fontSize:this.arg3,backgroundColor:this.arg4}; } } }).mount('#app'); </script> </body> </html>