一，计算属性Computed
我们的计算属性，和我们的方法很相似，但是我们的计算属性可以把复杂的东西更简单化，接下来就开始我们的计算属性，还是一样我们先在index.html里面把框架结构做好
<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 - {{b}}</p>
</div>
</body>
我们上面有两个<button>，当我们点击的时候，我们的<p>标签就会有对应的显示，我们现在来看看，计算属性和方法有什么不同，首先，我们在p标签下面在加两个p标签<p>age + A = {{agetoA}}</p>，<p>age + A = {{agetoB}}</p>，我们有了agetoA和agetoB这两个方法，那我们就要实现这两个方法，我们在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 - {{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;
}
}
})
我们要的结果是，当我们点击Add to A的时候我们的A会变，我们的age + A也会变，我们现在写的是方法，无论我们点A也好还是B也好，他们都会执行，我们为了验证我们的说法，我们在控制台里面看看console.log("add to A")，console.log("add to B")当我们进入到控制台我们会看到在我们没点的时候就已经显示了add to A和add to B，当我们刷新之后再点击button我们会看到add to A和add to B又出现了，这样的话是非常消耗性能的，但是我们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里面，但是在我们保存去页面刷新看的时候他会给我们报错的，如果我们想要调动我们的计算属性，就不能像方法那样加上括号了，那我们就在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 - {{b}}</p>
<p>age + A = {{agetoA}}</p>
<p>age + B = {{agetoB}}</p>
</div>
</body>
我们在回到页面刷新，当我们点击Add to A控制台就会给我们显示add to A，这就比我们的方法更优化的的一个地方，在什么时候我们使用这个计算属性，在我们变化幅度比较大，比如搜索的时候，那我们会使用计算属性。
二，动态绑定CSS样式
之前我们也知道了属性绑定，所以都有所了解，我们需要用到的就是v-bind:class=" "我们给v-bind:class=" "
一个对象，以动态的切换class，我们初始一下我们的html和app.js和style.css代码给个结构框架和样式
<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;
}
结构写好了我们就要实现动态绑定，我们要想动态绑定，我们还是使用我们的v-bind,属性就是class，属性里面要有值，而我们的值是一个对象，在这个对象当中，最终只有两个值，要么是true，要么是false，接下来我们就来看看怎么写这个动态样式，首先，我们在h1下面的div我们绑定一个class，要想有一个动态样式我们就绑定一个css里面的color，那css后面的值我们就写app.js里面的changecolor，v-bind:class="{color:changecolor}",这个时候我们回到页面在控制台里面我们会看到class这个时候是空的，默认状态下我们的div是红色的，那我们就想，当我们的class不为空，我们在div里面加一个<span>标签，内容就写“南极小丑”，在添加一个鼠标点击事件当我们点击的时候给他赋值，赋个取反的值v-on:click="changecolor=!changecolor"，这个值就是app.js里面的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></div>
</div>
</body>
这是我们的第一个示例，我们再说说第二个示例，当我们点击div的时候（第二个div）我们可以更改我们一个元素的样式，我们用我们上一篇计算属性来写，我们先给计算属性取名叫 computer这个名字就相当于我们上面的对象，我们现在要做的就是把我们data里面的两个属性都反过来，我们既然调用的是计算属性，那我们就要实现这个计算属性
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让他的长度发生变化，
<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的基础知识，希望看到这篇文章的各位前辈多多关照，小生有哪些错误的地方希望能够指出来，也希望其他和我一样的小白能够有所帮助。
网友评论