06Vue.js过滤器与计算属性
2018-04-16 本文已影响0人
个人不完美
过滤器使用方法
过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结果的简单函数。Vue有很多很便利的过滤器，可以参考官方文档， http://cn.vuejs.org/api/#过滤器 ，过滤器通常会使用管道标志 “ | ”
Vue里面的过滤器主要有两种：第一是定义在全局就能在所有的实例中调用过滤器，第二是定义在了实例里就在实例里调用过滤器。
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
详细的写法如下代码段所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue过滤器的使用</title>
<script src="./js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
<!-- 过滤器用法: | 过滤器名称 -->
<!-- <div>{{3.1415926 | number(2)}}</div> -->
<div>{{11 | addZero}}</div>
<button @click="click1">{{flag}}</button>
</div>
<script type="text/javascript">
//这里是全局过滤器(Vue.filter)的写法
Vue.filter('addZero',function(data){
return data<10?'0'+data:data;
});
var app = new Vue({
el: "#app",
data: {
flag:true
},
methods: {
click1:function(){
this.flag=!this.flag
}
},
filters: {
//这里是vue的局部过滤器
number:function(data,n){
//return data.toFixed(2);//保留两位小数
return data.toFixed(n);//传参写法(n表示用户传入的数值)
}
}
})
</script>
</body>
</html>
计算属性使用方法
计算属性：computed 主要是用于用来存储和处理数据。
详细的写法如下代码段所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>VUE的计算属性</title>
<script src="./js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
<!-- 反转字符串 将计算属性放在HTML模板里面看上去比较复杂，也不容易看懂理解 -->
<!-- <p>{{msg.split('').reverse().join('')}}</p> -->
<!-- 计算属性调用 -->
<p>{{reverseMsg}}</p>
<p>{{num2}}</p>
<!-- 计算属性的值变更 通过方法触发事件改变 -->
<!--<button @click="change">change</button>-->
<!--通过计算属性的值获取 -->
<button @click="getNum2()">getNum2</button>
</div>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
msg:'hello Vue!',
num1:100,
// num2:110
},
methods: {
change:function(){
this.num2=111;
},
getNum2(){
console.log(this.num2);
}
},
computed: {
//这里是计算属性主要是用来存储和处理数据
reverseMsg:function(){
//字符串反转
return this.msg.split('').reverse().join('');
},
num2:{
get:function(){
return this.num1-1;
},
set:function(val){
//this.num2=val;这种写法是错误的 不能直接修改计算属性
this.num1=val;
}
}
}
})
</script>
</body>
</html>
