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