vue.js侦听器和过滤器的使用及使用案例
1.侦听器
vue.js中侦听器用于数据变化时执行异步或开销较大的操作
当侦听器所绑定数据发生变化时，通知到侦听器所绑定的方法，执行该方法
下面所做的例子为模拟注册时检查用户名是否可用操作
通过侦听input框中的内容对input框后方的提示进行改变，并判断用户名是否可用
<body>
<div id="app">
<span>userName：</span>
<span>
<input type="text" v-model.lazy='uname'>`
<!--v-model.lazy:失去焦点时才触发其绑定事件-->
</span>
<span>{
{
tips}}</span>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
tips: '',
uname: ''
},
methods:{
checkName: function(uname){
//原本代码应为调用接口 现采用定时任务的方式模拟接口调用的延时效果
var that = this; //that用于缓存修改的数据tips
setTimeout(function(){
//模拟接口调用
if(uname == 'admin')
that.tips = "username has been used";
else
that.tips = "success";
},2000)
}
},
//监听器
watch: {
uname: function(val){
//调用后台接口验证用户名的合法性
this.checkName(val);
this.tips = 'checking...';
}
}
});
</script>
</body>
</html>
在进行编辑时曾产生过{ {tips}}直接显示在live server所创建的界面的情况，多半是以下原因造成：
1.显示内容的span标签未写到所绑定id为app的div元素下
2.methods，watch中有语法错误，使其无法正常显示
2.过滤器
vue.js中过滤器用于格式化数据，如将字符串格式化为首字母大写，将日期格式化为指定的格式等
具体操作在案例中给出
案例1：将文本框中的字符串改为首字母大写格式
<body>
<!--将字符串msg首字母变为大写-->
<div id="app">
<input type="text" v-model="msg">
<span>{
{
msg | upper}}</span>
</div>
<script type="text/javascript">
//过滤器操作
//第一个参数'upper'为过滤器名称
//第二个回调函数function中val为所传的值
Vue.filter('upper',function(val){
//通过拼接字符串获得首字母大写的数据
return val.charAt(0).toUpperCase() + val.slice(1);
})
var vm = new Vue({
el: '#app',
data: {
msg: ''
}
});
</script>
</body>
还可以进行级联操作
定义一个lower监听器，实行首字母小写操作
写为{ {msg | upper | lower}}
<body>
<!--将字符串msg首字母变为大写-->
<div id="app">
<input type="text" v-model="msg">
<div>{
{
msg | upper}}</div>
<div>{
{
msg | upper | lower}}</div>
</div>
<script type="text/javascript">
//过滤器操作
//第一个参数'upper'为过滤器名称
//第二个回调函数function中val为所传的值
Vue.filter('upper',function(val){
//通过拼接字符串获得首字母大写的数据
return val.charAt(0).toUpperCase() + val.slice(1);
})
Vue.filter('lower',function(val){
return val.charAt(0).toLowerCase() + val.slice(1);
})
var vm = new Vue({
el: '#app',
data: {
msg: ''
}
});
</script>
</body
live server显示结果：
过滤器还可以配合v-bind语句，在绑定数据属性时使用
<div id="app">
<input type="text" v-model="msg">
<div>{
{
msg | upper}}</div>
<div>{
{
msg | upper | lower}}</div>
//通过v-bind绑定类
<div :abc='msg | upper'></div>
</div>
带参数的过滤器：
模拟实现将日期格式调整为yyyy-mm-dd的格式
<body>
<div id="app">{
{
date | dateFormat("yyyy-mm-dd")}}</div>
<script type="text/javascript">
//arg用于传递参数，可定义多个arg
//使用：{
{date | dateFormat(arg)}}
Vue.filter('dateFormat',function(value,arg){
if(arg == "yyyy-mm-dd"){
var ret = '';
ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();
//需要return一个值作为过滤后得到的数据
return ret;
}
})
var vm = new Vue({
el: '#app',
data: {
date: new Date()
}
});
</script>
</body>
改良版：
Vue.filter('format', function(value, arg) {
function dateFormat(date, format) {
if (typeof date === "string") {
var mts = date.match(/(\/Date\((\d+)\)\/)/);
if (mts && mts.length >= 3) {
date = parseInt(mts[2]);
}
}
date = new Date(date);
if (!date || date.toUTCString() == "Invalid Date") {
return "";
}
var map = {
"M": date.getMonth() + 1, //月份
"d": date.getDate(), //日
"h": date.getHours(), //小时
"m": date.getMinutes(), //分
"s": date.getSeconds(), //秒
"q": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
var v = map[t];
if (v !== undefined) {
if (all.length > 1) {
v = '0' + v;
v = v.substr(v.length - 2);
}
return v;
} else if (t === 'y') {
return (date.getFullYear() + '').substr(4 - all.length);
}
return all;
});
return format;
}
return dateFormat(value, arg);
})
var vm = new Vue({
el: '#app',
data: {
date: new Date()
}
});
可以直接拿来用作日期过滤器