vue的页面指令和过滤器 详解
2021/12/18 23:27:55
本文主要是介绍vue的页面指令和过滤器 详解,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
页面指令
v-text / v-html :指定标签体
v-text :当做纯文本
v-htm :将value作为HTML标签来解析
v-if v-else v-show:
v-if :如果value为true,当前标签就会输出在页面
v-else :与 v-if 搭配使用,如果value为false,将当前标签输出到页面
v-show :在标签中添加display样式,如果当前标签value为true,display= block,否则none
v-for:遍历
遍历数组:v-for=“person in persons” $index
遍历对象:v-for=“value in person” $key
v-on:绑定事件监听
v-on:事件名,可以缩写成 :@事件名
监视事件的按键:@keyup.keyCode @keyup.enter
阻止事件的冒泡和事件默认行为:@click.stop @clickup.prevent
隐含对象:$event
v-bind:强制绑定解析表达式
很多属性值是不支持表达式的,就可以使用v-bind
可以缩写为: :id='name'
:class
:class="a"
:class="{ classA : isA, classB : isB }"
:class="[ classA, classB ]"
:style
:style="{ color : color }"
v-model: 双向数据绑定
v-el:标识某个标签
v-el:xxx
读取得到标签对象:this.$els.xxx
总结:
内置指令:
-
v:text : 更新元素的 textContent
-
v-html : 更新元素的 innerHTML
-
v-if : 如果为true, 当前标签才会输出到页面
-
v-else: 如果为false, 当前标签才会输出到页面
-
v-show : 通过控制display样式来控制显示/隐藏
-
v-for : 遍历数组/对象
-
v-on : 绑定事件监听, 一般简写为@
-
v-bind : 强制绑定解析表达式, 可以省略v-bind
-
v-model : 双向数据绑定
-
v-el : 为某个元素注册一个唯一标识, vue对象通过$els属性访问这个元素对象
-
v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }
自定义指令:
注册全局指令:
Vue.directive('my-directive', function(value){ this.el.innerHTML = value.toUpperCase(); })
注册局部指令:
directives : { 'my-directive' : function(value) { this.el.innerHTML = value; } }
使用指令:
v-my-directive='xxx'
过滤器
内置:
-
capitalize : 首字母大小
-
uppercase : 全部大写
-
lowercase : 全部小写
-
currency : 货币化
-
pluralize : 单数/复数处理
-
json : json格式化
-
limitBy : 限定数组的部分元素(下标)
-
filterBy : 限定数组的部分元素(值)
-
orderBy : 对数组进行排序
自定义:
全局过滤器:
Vue.filter('过滤器名',function(value,xxx,yyy){ //逻辑处理 return result })
局部过滤器:
new Vue({ filters:{ '过滤器名': function(value,xxx,yyy){ //逻辑处理 return result; } } })
这篇关于vue的页面指令和过滤器 详解的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南