一、綁定樣式
1贯要、使用:class對象綁定樣式
注意： :class綁定樣式時，對象的屬性是類選擇器名稱椭住，屬性值返回為true時崇渗，則表示添加該選擇器。
1.1、創(chuàng)建vue容器
<div id="app">
<ul class="city">
<!-- :class綁定樣式是宅广，對象的屬性是類選擇器名稱葫掉，屬性值返回true，表示添加該選擇器 -->
<li :class='{active:index===activeIndex}' @click='activeIndex=index' v-for='(item,index) in citys'
:key='index'>{{item}}</li>
</ul>
<ul class="city">
<li :class="index===activeIndex?'active':''" @click='activeIndex=index' v-for='(item,index) in citys'
:key='index'>{{item}}</li>
</ul>
<hr style="margin: 10px 0;">
<button @click='bgColor=true'>添加背景顏色</button>
<button @click='fontColor=true'>添加文本顏色</button>
<button @click='border=true'>添加容器邊框</button>
<div class="box1" :class='{bgColor:bgColor,fontColor:fontColor,border:border}'>好好學(xué)習(xí)vue</div>
1.2跟狱、構(gòu)建容器樣式
<style>
* {
list-style: none;
margin: 0;
padding: 0;
}
.city {
display: flex;
margin: 10px;
}
.city li {
border: 1px solid #ccc;
padding: 4px 6px;
}
.city li.active {
background-color: burlywood;
color: white;
}
.box1 {
width: 200px;
height: 200px;
padding: 10px;
}
.bgColor {
background-color: skyblue;
}
.fontColor {
color: tomato;
}
.border {
border: 2px solid gray;
}
</style>
1.3俭厚、創(chuàng)建vue對象
<script src="../js/Vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
activeIndex: 0,
citys: ['北京', '南京', '上海', '廣州'],
//是否添加北京顏色
bgColor: false,
//是否添加文本顏色
fontColor: false,
//是否顯示邊框
border: false,
//定義背景顏色
bgc: 'pink',
//定義文本顏色
fc: 'blue'
}
})
</script>
2、使用:class數(shù)組三元表達(dá)式綁定對象
<hr style="margin: 10px 0;">
<div class="box1" :class="[bgColor?'bgColor':'',fontColor?'fontColor':'',border?'border':'']">好好學(xué)習(xí)vue</div>
3驶臊、使用:style綁定對象
注意：:style綁定樣式時挪挤，對象的屬性名稱是css樣式的名稱（要使用小駝峰命名法），屬性值是具體的樣式值
<!-- :style綁定樣式時关翎，對象的屬性名稱是css樣式的名稱（要使用小駝峰命名法）扛门，屬性值是具體的樣式值 -->
<div class="box1" :style="{backgroundColor:bgc,color:fc}">好好學(xué)習(xí)vue
<p>背景色：<input type="text" v-model='bgc'></p>
<p>文本色：<input type="text" v-model='fc'></p>
</div>
二、計算屬性
注意：計算屬性與vue對象里的方法相比 纵寝，計算屬性的優(yōu)勢是尖飞，有緩存，當(dāng)頁面數(shù)據(jù)發(fā)生變化時店雅，所有的方法都要重新執(zhí)行政基，但是只有當(dāng)計算屬性用到的數(shù)據(jù)發(fā)生變化時，計算屬性才會重新執(zhí)行闹啦。
<div id="app">
<p>姓：<input type="text" v-model="firstName"></p>
<p>名：<input type="text" v-model="lastName"></p>
<p>地址：<input type="text" v-model="address"></p>
<!-- 計算屬性的優(yōu)勢是沮明，有緩存，當(dāng)頁面數(shù)據(jù)發(fā)生變化時窍奋，所有的方法都要重新執(zhí)行荐健，當(dāng)計算屬性用到的數(shù)據(jù)發(fā)生變化時，計算屬性才會重新執(zhí)行 -->
<p>方法返回姓名：<input type="text" v-model="fullName2()"></p>
<p>計算屬性返回姓名：<input type="text" v-model="fullName"></p>
<hr>
<ul>
<li v-for='(item,index) in goodses' :key='index'>{{item.name}}--{{item.price}}
<button @click='delGoods(index)'>刪除</button>
</li>
<li>總價是--{{totalPrice}}元</li>
</ul>
</div>
<script src="../js/Vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
firstName: '張',
lastName: '李',
address: '南京',
goodses: [
{
name: '油煙機(jī)',
price: 2599
},
{
name: '冰箱',
price: 1599
},
{
name: '空調(diào)',
price: 3599
}
]
},
methods: {
fullName2(){
return this.firstName+'.'+this.lastName
},
delGoods(index){
this.goodses.splice(index,1)
}
// totalPrice(){
// console.log('我在計算總價格');
// let sum = 0
// this.goodses.forEach(r => {
// sum += r.price
// })
// return sum
// }
},
//用于定義計算屬性
computed: {
totalPrice(){
console.log('我在計算總價格');
let sum = 0
this.goodses.forEach(r => {
sum += r.price
})
return sum
},
//在這里面定義的是方法琳袄，計算屬性默認(rèn)情況下只能讀江场，不能改
fullName(){
console.log('我是計算屬性')
return this.firstName+'.'+this.lastName
},
// //定義完整結(jié)構(gòu)的計算屬性
// fullName: {
// //get方法，用于返回計算屬性的值
// get() {
// return this.firstName + '.' + this.lastName
// },
// // set方法窖逗，修改計算屬性的結(jié)果址否，該方法接收一個參數(shù)是最新的值
// set(){
// let arr = val.spilt('.')
// this.firstName = arr[0]
// this.lastName = arr[1]
// }
// }
}
})
三、偵聽器
注意：數(shù)據(jù)偵聽器--根據(jù)屬性的名稱碎紊，定義一個方法佑附，用于偵聽該屬性的變化。這個方法仗考，可以傳兩個參數(shù)音同，第一個參數(shù)是最新值，第二個參數(shù)是舊值
<div id="app">
<p>姓名：<input type="text" v-model='name'></p>
<p>年齡：<input type="text" v-model='age'>{{myAge}}</p>
<hr>
<h2>學(xué)生信息</h2>
<button @click='resetStudent'>修改學(xué)生信息</button>
<p>姓名：<input type="text" v-model='student.name'></p>
<p>年齡：<input type="text" v-model='student.age'></p>
<p>性別：<input type="text" v-model='student.sex'></p>
</div>
<script src="../js/Vue.js"></script>
<script>
Vue.config.productionTip = false
new Vue({
el:"#app",
data:{
name:'張三',
age:22,
student:{
name:'李四',
age:20,
sex:'女'
}
},
methods: {
resetStudent(){
this.student = {
name:'王五',
age:33,
sex:'男'
}
}
},
//數(shù)據(jù)偵聽器
watch:{
//根據(jù)屬性的名稱秃嗜，定義一個方法权均，用于偵聽該屬性的變化
//這個方法顿膨，可以傳兩個參數(shù)，第一個參數(shù)是最新值叽赊，第二個參數(shù)是舊值
name(nval,oval){
//比如虽惭，當(dāng)name屬性發(fā)生變化時，重新發(fā)送Ajax請求獲取新的數(shù)據(jù)
console.log(nval,oval);
},
// age(nval,oval){
// console.log(nval,oval);
// },
// student(nval,oval){
// console.log(nval,oval);
// },
//偵聽對象蛇尚，需要開啟深度監(jiān)視
student:{
//開啟深度監(jiān)視
deep:true,
//開始運(yùn)行一次（注意：這種情況下芽唇，舊值是undefined）
immediate:true,
//定義監(jiān)視函數(shù)
handler(nval,oval){
//開啟深度監(jiān)視，舊值已經(jīng)沒有意義取劫，因?yàn)閷ο笫且妙愋偷? //對象的屬性值已經(jīng)改了匆笤，就沒有舊的屬性值
console.log(nval,oval);
}
}
},
//計算屬性也有監(jiān)視對象的能力
computed:{
myAge(){
//當(dāng)計算屬性里面用到的數(shù)據(jù)發(fā)生變化時，會重新執(zhí)行計算屬性
//只是計算屬性必須要在模板中使用
console.log(this.age);
return this.age
}
}
})
</script>
四谱邪、過濾器
注意：過濾器在模板中通過管道符| 的方式來調(diào)用炮捧，過濾器可以鏈?zhǔn)秸{(diào)用，就是之前已經(jīng)過濾完成的結(jié)果惦银，繼續(xù)傳遞給下一個過濾器咆课，注意順序。
<div id="app">
<p>商品名稱：{{goods.name}}</p>
<p>商品價格：{{toFixed2(goods.price)}}</p>
<p>商品價格：{{myGoods.price}}</p>
<!-- 通過管道符 | 調(diào)用過濾器扯俱，其實(shí)就是調(diào)用這個方法书蚪，將值傳過去， -->
<p>商品價格（人民幣）：{{goods.price | toFixed2 | toRMB}}
<input type="text" :value='goods.price | toFixed2'>
</p>
<!-- 過濾器可以鏈?zhǔn)秸{(diào)用迅栅，就是之前已經(jīng)過濾完成的結(jié)果殊校，繼續(xù)傳遞給下一個過濾器，注意順序 -->
<p>商品價格（美元）：{{goods.price | toFixed2 | toUS}}</p>
</div>
<hr>
<div id="app2">
<p>商品名稱：{{goods.name}}</p>
<p>商品價格（美元）：{{goods.price | toFixed2 }}</p>
</div>
<script src="../js/Vue.js"></script>
<script src="../l03/index.js"></script>
<script>
Vue.config.productionTip = false
new Vue({
el:'#app2',
data:{
goods:{
name:'華為手機(jī)',
price:4311.6666
}
}
})
new Vue({
el: '#app',
data: {
goods: {
name: '小米手機(jī)',
price: 2566.5555
}
},
//定義方法读存，過濾商品的價格
methods: {
toFixed2(val) {
return val.toFixed(2)
}
},
//定義一個計算屬性
computed: {
myGoods() {
let goods = {
name: this.goods.name,
price: this.goods.price.toFixed(2)
}
return goods
}
},
//定義過濾器
filters: {
//過濾器在模板中通過管道符| 的方式來調(diào)用
toFixed2(val) {
return val.toFixed(2)
},
//返回人民幣數(shù)據(jù)
toRMB(val) {
return '￥' + val
},
//返回美元數(shù)據(jù)
toUS(val) {
return '$' + (val / 6.5).toFixed(2)
}
}
})
</script>
