有关于绑定v-bind绑定class的练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
.cs1{
color: black;
font-weight: 200;
font-style: italic;
letter-spacing: 0.5em
}
.cs2{
color: red;
font-weight: 300;
font-style: inherit;
letter-spacing: 1em
}
</style>
</head>
<body>
<script src="https://unpkg.com/vue@next"></script>
<div id="app">
<p :class="{cs1:bor1right,cs2:bor2right}" v-show="msg">{{name}}</p>
<button @click="changeshow" @mouseover="changename2">越共探头</button>
<button @click="changename" @dblclick="changecolor">来自老大哥的警告</button>
</div>
<script>
const app = Vue.createApp({
data(){
return{
name:'越共探头',
name2:'同志,肃反名单上有你',
msg:false,
bor1:'cs1',
bor2:'cs2',
bor1right:true,
bor2right:false,
}
},
methods:{
changeshow:function(){
this.msg = !this.msg
that = this.name
},
changecolor:function(){
this.name = this.name2
},
changename:function(){
this.bor1right = !this.bor1right
this.bor2right = !this.bor2right
},
changename2:function(){
this.bor1right = !this.bor1right
this.bor2right = !this.bor2right
this.name = that
}
},
})
const vm=app.mount('#app');
</script>
</body>
</html>