一、Vue的计算属性

??????computed，是以函数形式来实现功能，函数都必须写在computed属性下。
??????在 Vue 应用中，在模板中双向绑定一些数据或者表达式，但是表达式如果过长，或者逻辑更为复杂时，就会变得臃肿甚至难以维护和阅读，比如

<div>
{{text.split(',').reverse().join(',')}}
</div>

这里表达式包含三个操作，并不是很清晰，所以在遇到复杂的逻辑时应该使用计算属性。上例可以用计算属性进行改写：

computed: {
ReversedText: function ()
{
//所有计算属性都以函数的形式写在 Vue 实例内的 computed 选项内，最终返回计
算后的结果
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){ //参数'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: {  //局部过滤器：给Vue实例挂载filters属性
                myfilter: function(value){
                    if(!value){
                        return ''
                    }
                    value= value.toString();
                    return value.toUpperCase();
                }
            }
        })