一、Vue的计算属性
??????computed，是以函数形式来实现功能，函数都必须写在computed属性下。
??????在 Vue 应用中，在模板中双向绑定一些数据或者表达式，但是表达式如果过长，或者逻辑更为复杂时，就会变得臃肿甚至难以维护和阅读，比如
<div>
{{text.split(',').reverse().join(',')}}
</div>
这里表达式包含三个操作，并不是很清晰，所以在遇到复杂的逻辑时应该使用计算属性。 上例可以用计算属性进行改写：
computed: {
ReversedText: function ()
{
算后的结果
return this.text.split(',').reverse().join(',')
}
}
1、getter方法
??????用来读取计算属性的值 — 默认。
2、setter方法
??????用来修改计算属性的值。
3、计算属性的缓存
??????一个计算属性所依赖的数据发生变化时，他才会重新取值，所以依赖的数据只要不改变。计算属性也就不更新。使用计算属性还是 methods 取决于是否需要缓存，当遍历大数组和做大量计算时，应当使用计算属性。
例：
<body>
<div id='app'>
<label>
firstname:<input type="text" v-model='firstname'>
</label><br><br>
<label>
lastname:<input type="text" v-model='lastname'>
</label><br><br>
全名：{{fullname}}
</div>
<script>
new Vue({
el:'#app',
data:{
firstname:'',
lastname:''
},
computed:{
fullname:{
get:function(){
return this.firstname+' '+this.lastname
},
set:function(newValue){
let names = newValue.split(' ');
this.firstname=names[0];
this.lastname=names[1];
}
}
}
})
</script>
</body>
二、Vue的监听器(监听属性)
??????watch — 当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
1、使用方法
??????在Vue实例中挂载watch属性，侦听data中数据的变化
2、示例
<body>
<div id='app'>
<input type='text' v-model='message'><br><br>
<h2>{{state}}</h2>
</div>
<script>
new Vue({
el:'#app',
data:{
message:'hello',
state:'[未修改]'
},
watch:{
message:function(e){
console.log(e);
this.state='[已修改]';
}
}
})
</script>
</body>
三、class的绑定
1、可以传给 v-bind:class 一个对象，以动态地切换 class
2、将样式包装成一个对象(该对象中包含了多个样式规则)，然后将该对象绑定在标签的class属性上
3、class的数组语法
<style>
div{
width: 100px;
height: 100px;
}
.red{
background-color: red;
}
.border{
border:1px solid black;
}
.radius{
border-radius: 50%;
}
</style>
<body>
<div id='app'>
<div v-bind:class='classObj'></div>
</div>
<script>
new Vue({
el:'#app',
data:{
classObj:{
red:true,
border:true,
radius:true
}
}
})
</script>
</body>
四、style的绑定(对象语法)
1、直接绑定
??????v-bind:style 的对象语法十分直观 ——看着非常像 CSS ，但其实是一个 JavaScript 对象。 CSS式 属性名可以用驼峰式 )(camelCase) 隔 或短横线分隔 (kebab-case ，记得用引号括起来) ) 来命名
2、对象绑定
v-bind:style="styleObject"
new Vue({
el:'#~~',
data:{
styleObject: {
~
}
};
3、计算属性绑定
new Vue({
el:'#app',
data:{
bl:false
},
computed:{
computeStyle(){
return{
color:this.bl?'red':'blue',
fontSize:this.bl?'20px':'50px',
fontWeight:this.bl?'bold':'normal'
}
}
}
});
五、Vue 的过滤器(filter)
??????主要用于文本的格式化，或者数组数据的过滤与排序等。
1、语法
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
2、分类
(1)全局过滤器
??????使用 Vue.filter()方法来注册，该方法接收两个参数，第一个参数是过滤器的ID(即名字), 第二个参数是一个函数对象，过滤器要实现的功能在这个函数中定义。
强调：定义位置必须在程序的开始。
<div id="app">
<input type="text" v-model="message" />
{{ message | myfilter }}
</div>
<script>
Vue.filter('myfilter',function(value){
if(!value){
return ''
}
value = value.toString();
return value.toUpperCase();
})
new Vue({
el: '#app',
data: {
message: 'javascript'
}
})
</script>
(2)局部过滤器
??????是在 Vue 实例中挂载filters 属性来注册。
new Vue({
el: '#app',
data: {
message: 'javascript'
},
filters: {
myfilter: function(value){
if(!value){
return ''
}
value= value.toString();
return value.toUpperCase();
}
}
})
|