一撮竿，計算屬性Computed
我們的計算屬性吮便，和我們的方法很相似，但是我們的計算屬性可以把復雜的東西更簡單化幢踏，接下來就開始我們的計算屬性髓需，還是一樣我們先在index.html里面把框架結(jié)構(gòu)做好
<body>
<div id="vue-app">
<button v-on:click="a++">Add to A</button>
<button v-on:click="b++">Add to B</button>
<p>A - {{a}}</p>
<p>B - {}</p>
</div>
</body>
我們上面有兩個<button>房蝉，當我們點擊的時候僚匆，我們的<p>標簽就會有對應的顯示，我們現(xiàn)在來看看搭幻，計算屬性和方法有什么不同咧擂，首先，我們在p標簽下面在加兩個p標簽<p>age + A = {{agetoA}}</p>檀蹋，<p>age + A = {{agetoB}}</p>松申，我們有了agetoA和agetoB這兩個方法，那我們就要實現(xiàn)這兩個方法俯逾，我們在app.js里面寫我們的方法
<body>
<div id="vue-app">
<button v-on:click="a++">Add to A</button>
<button v-on:click="b++">Add to B</button>
<p>A - {{a}}</p>
<p>B - {贸桶}</p>
<p>age + A = {{agetoA()}}</p>
<p>age + B = {{agetoB()}}</p>
</div>
</body>
new Vue({
el:"#vue-app",
data:{
a:0,
b:0,
age:20
},
methods:{
addtoA:function(){
return this.a + this.age;
},
addtoB:function(){
return this.b + this.age;
}
}
})
我們要的結(jié)果是，當我們點擊Add to A的時候我們的A會變纱昧，我們的age + A也會變刨啸，我們現(xiàn)在寫的是方法，無論我們點A也好還是B也好识脆，他們都會執(zhí)行设联，我們?yōu)榱蓑炞C我們的說法，我們在控制臺里面看看console.log("add to A")灼捂，console.log("add to B")當我們進入到控制臺我們會看到在我們沒點的時候就已經(jīng)顯示了add to A和add to B离例，當我們刷新之后再點擊button我們會看到add to A和add to B又出現(xiàn)了，這樣的話是非常消耗性能的悉稠，但是我們computed是不一樣的
new Vue({
el:"#vue-app",
data:{
a:0,
b:0,
age:20
},
methods:{
addtoA:function(){
console.log("add to A");
return this.a + this.age;
},
addtoB:function(){
console.log("add to B");
return this.b + this.age;
}
}
})
我們computed和方法在用法上很相似的宫蛆，我們的可以直接把方法拷貝一份到computed里面，但是在我們保存去頁面刷新看的時候他會給我們報錯的，如果我們想要調(diào)動我們的計算屬性耀盗，就不能像方法那樣加上括號了想虎，那我們就在html里面把括號刪掉就行了
new Vue({
el:"#vue-app",
data:{
a:0,
b:0,
age:20
},
methods:{
},
computed:{
addtoA:function(){
console.log("add to A");
return this.a + this.age;
},
addtoB:function(){
console.log("add to B");
return this.b + this.age;
}
}
})
<body>
<div id="vue-app">
<button v-on:click="a++">Add to A</button>
<button v-on:click="b++">Add to B</button>
<p>A - {{a}}</p>
<p>B - {}</p>
<p>age + A = {{agetoA}}</p>
<p>age + B = {{agetoB}}</p>
</div>
</body>
我們在回到頁面刷新叛拷，當我們點擊Add to A控制臺就會給我們顯示add to A舌厨，這就比我們的方法更優(yōu)化的的一個地方，在什么時候我們使用這個計算屬性忿薇，在我們變化幅度比較大裙椭，比如搜索的時候，那我們會使用計算屬性署浩。
二揉燃，動態(tài)綁定CSS樣式
之前我們也知道了屬性綁定，所以都有所了解筋栋，我們需要用到的就是v-bind:class=" "我們給v-bind:class=" "
一個對象炊汤，以動態(tài)的切換class，我們初始一下我們的html和app.js和style.css代碼給個結(jié)構(gòu)框架和樣式
<body>
<div id="vue-app">
<h1> 示例 1 </h1>
<div></div>
<h2> 示例 2 </h2>
<div></div>
</div>
</body>
new Vue ({
el:"vue-app",
data:{
changecolor:false,
changelength:false
},
methods:{
},
computed:{
}
});
span{
background: red;
display: inline-block;
padding: 10px;
color: #fff;
margin: 10px 0;
}
.color span {
background: green;
}
.length span:after{
content: "length";
margin-left: 10px;
}
結(jié)構(gòu)寫好了我們就要實現(xiàn)動態(tài)綁定弊攘，我們要想動態(tài)綁定婿崭，我們還是使用我們的v-bind,屬性就是class，屬性里面要有值肴颊，而我們的值是一個對象氓栈，在這個對象當中，最終只有兩個值婿着，要么是true授瘦，要么是false，接下來我們就來看看怎么寫這個動態(tài)樣式竟宋，首先提完，我們在h1下面的div我們綁定一個class，要想有一個動態(tài)樣式我們就綁定一個css里面的color丘侠，那css后面的值我們就寫app.js里面的changecolor徒欣，v-bind:class="{color:changecolor}",這個時候我們回到頁面在控制臺里面我們會看到class這個時候是空的，默認狀態(tài)下我們的div是紅色的蜗字，那我們就想打肝，當我們的class不為空，我們在div里面加一個<span>標簽挪捕，內(nèi)容就寫“南極小丑”粗梭，在添加一個鼠標點擊事件當我們點擊的時候給他賦值，賦個取反的值v-on:click="changecolor=!changecolor"级零，這個值就是app.js里面的changecolor**断医，這個時候當我們點擊“南極小丑”的時候我們會發(fā)現(xiàn)背景從紅色變成了綠色。
<body>
<div id="vue-app">
<h1> 示例 1 </h1>
<div v-on:click="changecolor=!changecolor"
v-bind:class="{color:changecolor}">
<span>“南極小丑”</span>
</div>
<h2> 示例 2 </h2>
<div></div>
</div>
</body>
這是我們的第一個示例，我們再說說第二個示例鉴嗤，當我們點擊div的時候（第二個div）我們可以更改我們一個元素的樣式斩启，我們用我們上一篇計算屬性來寫，我們先給計算屬性取名叫 computer這個名字就相當于我們上面的對象醉锅，我們現(xiàn)在要做的就是把我們data里面的兩個屬性都反過來浇垦，我們既然調(diào)用的是計算屬性，那我們就要實現(xiàn)這個計算屬性
new Vue ({
el:"vue-app",
data:{
changecolor:false,
changelength:false
},
methods:{
},
computed:{
computer:function(){
return{
color=this.changecolor,
}
}
}
});
<body>
<div id="vue-app">
<h1> 示例 1 </h1>
<!--<div v-on:click="changecolor=!changecolor"
v-bind:class="{color:changecolor}">
<span>“南極小丑”</span>
</div>-->
<h2> 示例 2 </h2>
<div v-bind:class="computer">
<span>"南極小丑"</span>
</div>
</div>
</body>
這樣其實是和我們上面一樣的荣挨，這個時候我們就差一個點擊事件,我們給他加一個點擊事件v-on:click="changecolor=!changecolor",當我們點擊的時候他就變成了非changecolor,我們還可以添加多個事件changelength讓他的長度發(fā)生變化，
<body>
<div id="vue-app">
<h1> 示例 1 </h1>
<!--<div v-on:click="changecolor=!changecolor"
v-bind:class="{color:changecolor}">
<span>“南極小丑”</span>
</div>-->
<h2> 示例 2 </h2>
<button v-on:click="changecolor=!changecolor">change color</button>
<button v-on:click="changelength=!changelength">change length</button>
<div v-bind:class="computer">
<span>"南極小丑"</span>
</div>
</div>
</body>
new Vue ({
el:"vue-app",
data:{
changecolor:false,
changelength:false
},
methods:{
},
computed:{
computer:function(){
return{
color=this.changecolor,
length=this.changelength
}
}
}
});
這樣當我們點擊其中一個按鈕他就會相應的改變CSS樣式
這是我和大家一起分享我自己所學到的一些Vue.js的基礎(chǔ)知識朴摊，希望看到這篇文章的各位前輩多多關(guān)照默垄，小生有哪些錯誤的地方希望能夠指出來，也希望其他和我一樣的小白能夠有所幫助甚纲。
