Vue入门 03-vue过滤器模板等
来源:互联网 发布:广告播放软件 编辑:程序博客网 时间:2024/06/06 16:27
一、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>
- Vue入门 03-vue过滤器模板等
- vue笔记---模板语法--过滤器
- Vue--过滤器
- Vue 过滤器
- vue过滤器
- vue过滤器
- vue--过滤器
- vue-过滤器
- Vue--过滤器
- Vue 模板
- Vue模板
- Vue 模板
- vue学习03--模板语法
- vue入门
- Vue入门
- Vue入门
- vue入门
- Vue入门
- POJ-1724-ROADS
- 基础练习 阶乘计算
- 双曲函数 tanh是什么函数
- linux驱动---file_operations之poll
- 数据库事务隔离级别
- Vue入门 03-vue过滤器模板等
- log4j.properties配置详解
- 多维数组在函数中的使用和传参
- 第一个数加第二个数等于第三个数的循环
- MySQL数据库——‘单表’的更新与删除
- codeves天梯 火星人
- pandas read_csv 和 DictReader读取文件的区别
- 工厂设计模式
- 一个简单的C++内存泄漏检测程序