提示：
本文为VUE栏目：VUE学习：vue基础04————VUE语法对内容处理：属性和样式处理
vue基础04————VUE语法对内容处理：属性和样式处理
前言
本文继续学习VUE语法对内容的处理。
提示：以下是本篇文章正文内容，下面案例可供参考
VUE
VUE语法对内容处理
属性和样式处理
全文代码
<body>
<div id="app">
<!--v-bind:指令用来处理属性中使用data的值，简写为:-->
<p v-bind:id="id" :title="title">你好，小明</p>
<!--v-bind指令中支持js代码-->
<p :title="title + '呵呵'">你好，大明</p>
<p :title="title.substr(0,2)">你好，中明</p>
<hr>
<p style="color:red;">你好，小红</p>
<!--一定要记住的点：v-bind中要么调用data里的属性名，要么自己写正确的js代码-->
<p :style="{color:'red'}">你好，小红</p>
<p :style="style">你好，小红</p>
<p :style="style" :title=" 'vue中控制属性' ">你好，小红</p>
<!--true和false是表示布尔类型的关键字加了单引号则变成普通的字符串-->
<input type="checkbox" :checked="'false'">
<!--一次处理多个样式-->
<p :style="[style,style2]">你好，大红</p>
<hr>
<p id="pc" class="test1 test2">你好，小张</p>
<p :class="['test1','test2']">你好，小张</p>
<p :class="['test1',{'test2':true}]">你好，小张</p>
<p :class="['test1',{'test2':flag}]">你好，小张</p>
<p :class="classObj">你好，大张</p>
<button type="button" v-on:click="toggle">切换样式</button>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
id:"username",
title:"你好世界",
style:{
color:'pink',
'font-size':'30px'
},
style2:{
'font-weight':'900'
},
flag:false,
classObj:{'test1':false,test2:true}
},
methods:{
toggle(){
// if(this.flag){
// this.flag=false;
// }else{
// this.flag=true;
// }
this.flag=!this.flag; /*只有布尔类型可以使用这种写法*/
}
},
created(){
let pc=document.querySelector("#pc");
console.log(pc.className);
/*className属性直接赋值时覆盖操作，不管你原先有多少样式，都会被覆盖为新给的值。*/
pc.classList.add('test3');
pc.classList.remove('test2');
}
});
</script>
v-bind:指令
v-bind:指令用来处理属性中使用data的值，简写为":"
<p v-bind:id="id" :title="title">你好，小明</p> //title:你好世界
v-bind指令中支持js代码
<p :title="title + '呵呵'">你好，大明</p> //title:你好世界呵呵
<p :title="title.substr(0,2)">你好，中明</p> //title:你好
<script>
new Vue({
el:"#app",
data:{
id:"username",
title:"你好世界",
}
});
</script>
属性处理
v-bind中要么调用data里的属性名，要么自己写正确的js代码
<p :style="{color:'red'}">你好，小红</p>
//<p :style="{color:'red'}">你好，小红</p>
<p :style="style">你好，小红</p>
//<p :style="style">你好，小红</p>
<p :style="style" :title=" 'vue中控制属性' ">你好，小红</p>
//<p :style="style" :title=" 'vue中控制属性' ">你好，小红</p>
<script>
new Vue({
el:"#app",
data:{
id:"username",
title:"你好世界",
style:{
color:'pink',
'font-size':'30px'
},
style2:{
'font-weight':'900'
},
flag:false,
classObj:{'test1':false,test2:true}
},
});
</script>
true和false是表示布尔类型的关键字加了单引号则变成普通的字符串
<input type="checkbox" :checked="'false'">
//<input type="checkbox" :checked="'false'">
样式处理
<style>
.test1{
background-color: #00b7ee;
}
.test2{
color: #fff;
}
</style>
<script>
new Vue({
el:"#app",
data:{
id:"username",
title:"你好世界",
style:{
color:'pink',
'font-size':'30px'
},
style2:{
'font-weight':'900'
},
flag:false,
},
});
</script>
一次处理多个样式
<p :style="[style,style2]">你好，大红</p>
<p id="pc" class="test1 test2">你好，小张</p>
<p :class="['test1','test2']">你好，小张</p>
<p :class="['test1',{'test2':true}]">你好，小张</p>
<p :class="['test1',{'test2':flag}]">你好，小张</p>
切换样式
<p :class="classObj">你好，大张</p>
<button type="button" v-on:click="toggle">切换样式</button>
<script>
new Vue({
el:"#app",
data:{
id:"username",
title:"你好世界",
style:{
color:'pink',
'font-size':'30px'
},
style2:{
'font-weight':'900'
},
flag:false,
classObj:{'test1':false,test2:true}
},
methods:{
toggle(){
this.flag=!this.flag;
}
},
created(){
let pc=document.querySelector("#pc");
console.log(pc.className);
pc.classList.add('test3');
pc.classList.remove('test2');
}
});
</script>