Javascript

vue的页面指令和过滤器 详解

本文主要是介绍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的页面指令和过滤器 详解的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!