Vue入门 03-vue过滤器模板等

一、vue模板

在vue中使用原生html中嵌入{{}}表达式用于绑定数据。
在vue中表单数据是双向绑定的，即数据更新，模板也会进行相应的更新
注：若要只绑定最初数据，则使用v-once指令

{{msg}}

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

二、vue过滤器

与angular类似，vue中过滤器的使用也是 “|”

    {{msg|uppercase}}——大写
    {{msg|lowercase}}——转小写
    {{"WELCOME"|lowercase|capitalize}}——首字母大写

2.1、常见过滤器
1、debounce ——延迟执行事件，需要 配合事件（键盘事件）使用
在绑定事件处加过滤器，过滤器都是通过｜来用
例： @keyup=”show|debounce 2300”
2、limitBy ——限制数据，配合循环使用，配合数组使用的过滤器
例：遍历只取前两条数据

<li v-for="val in arr | limitBy 2">
    {{val}}
</li>

3、filterBy 过滤
例：过滤出含“w”的数据

<ul>
    <li v-for="(i,v) in dataArr|filterBy 'w' ">{{val}}</li>
</ul>

4、orderBy——排序

  语法：orderBy   参数1（按什么排序）  参数2：1或-1     正序、倒序

例：以输入的值为参考进行排序

    <input type="text" v-model="a" />
    <ul>
        <li v-for="val in arr|orderBy a">{{val}}</li>
    </ul>

2.2 自定义过滤器

语法：

    Vue.filter(name,function(input，参数1，参数2){
        return input<10?'0'+input: ''+ input;      //给单个数字补0的过滤器
    })
    name：为过滤器的名字
    input：为输入的内容
    return：返回结果

使用：
….|name 参数1 参数2 ——没逗号
例：

<!--语法：Vue.filter(name,function(input,arg1,arg2..){})-->
<div id="box">
<input type="text" v-model="test">
<br>
<p>输入过滤值：{{test|padding}}</p>
<br>
<p>{{time|toDate}}</p>
</div>
<script>
//定义一个当数字小于0时补充0的过滤器
Vue.filter('padding',function(input){
return input<10? '0'+input:''+input;
})
Vue.filter('toDate',function(input){
var now=new Date(input);
return now.getFullYear()+"-"+(now.getMonth()+1)+"-"+now.getDate()+" "+now.getHours()+":"+now.getMinutes()+":"+now.getSeconds();
})
var vm=new Vue({
el:"#box",
data:{
test:"",
time:new Date()
}
})
</script>