vue.js基础知识篇(4):过滤器、class与style的绑定2

代码下载:网盘

欢迎私信

第一章:过滤器

过滤器是对数据进行处理并返回结果的函数。

1.语法

语法是使用管道符“|”进行连接。过滤器可以接收参数，跟在过滤器后面，带引号的参数被当做字符串处理，不带引号的参数被当做数据属性名处理。

{{message | filterFunction "arg1" arg2 }}

vue.js支持在任何出现表达式的地方添加过滤器。

vue.js支持链式调用，上一个过滤器的输出结果作为下一个过滤器的输入。类似于Linux shell的管道符(|)使用。

<span>{{"ddfe"|capitalize|reverse}}</span>
<!--ddfe->Ddfe->efdD-->

2.内置过滤器

(1)字母操作capitalize、uppercase、lowercase

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字母操作过滤器</title>
</head>
<body>
<div id="app">
    <div>{{"ddfe"|capitalize}}</div>
    <div>{{"ddfe"|uppercase}}</div>
    <div>{{"DDFE"|lowercase}}</div>
</div>
<!--"ddfe"=>capitalize-->
<script src="js/vue.js"></script>
<!--它以vue对象的形式挂载到window对象上-->
<script>
    new Vue({
        el:"#app"
    })
</script>
</body>
</html>

(2)json过滤器

先看它如何使用的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <div id="app">
       <div >{{didiFamily|json}}</div>
   </div>
   <script src="js/vue.js"></script>
   <script>
       new Vue({
           el:"#app",
           data:{
               didiFamily:{
                   "name":"ddfe",
                   "age":3
               }
           }
       })
   </script>
</body>
</html>

浏览器的显示结果:

再来看一下源码。

json: {
      read: function read(value, indent) {
        return typeof value === ‘string‘ ? value : JSON.stringify(value, null, Number(indent) || 2);
      },
      write: function write(value) {
        try {
          return JSON.parse(value);
        } catch (e) {
          return value;
        }
      }
    }

主要说一说，JSON的stringify函数和JSON的parse函数。

stringify函数的功能是把对象或者数组转换为JSON字符串。parse函数的功能是把有效的json字符串解析为对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>json过滤器</title>
</head>
<body>
</body>
   <script>
       var a = {a:1,b:2};
       var str=JSON.stringify(a);//"{"a":1,"b":2}"
       var ps=JSON.parse(str);//{a:1,b:2}
   </script>
</body>
</html>

(3)限制过滤器limitBy、filterBy、orderBy

这3个过滤器处理的数据必须是数组，否则程序会报错。

limitBy显示以偏移量(默认为0)开始的N个数组。

filterBy要么处理数组搜索字符串(参数提供)，要么处理对象对所有属性搜索字符串，如果提供特定属性，使用"in"语法。

orderBy如果参数小于0，那么是降序排列，如果参数大于0，那么是升序排列。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <div id="app">
       <div v-for="num in nums| limitBy 10">
           <div>{{num}}</div>
           <!--显示从默认的0开始的10个元素-->
       </div>
       <div v-for="num in nums| limitBy 10 2">
           <div>{{num}}</div>
           <!--显示从索引为2开始的10个元素-->
       </div>
       <div>{{arr|filterBy "hello"}}</div>
       <input v-model="name"/>
       <ul>
           <li v-for="user in users|filterBy name in ‘name‘">
               {{user.name}}
           </li>
           <!--动态参数作为搜索字段-->
       </ul>
       <div>{{nums|orderBy -1}}</div>
       <!--参数小于,0，那么是降序排列，参数大于0，那么是升序排列-->
       <div>{{nums|orderBy 1}}</div>
   </div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            nums:[1,2,3,4,5,6,7,18,9,10,11,12,13],
            arr:["hello1","hello2","hello3","welcome"],
            users:[
                {name:"Bruce"},
                {name:"Chuck"},
                {name:"Jackie"}
            ],
            name:""
        }
    })
</script>
</body>
</html>

(4)currency过滤器　　

作用是给数字添上货币符号，默认的为$美元。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
   <div>{{"122334"|currency "￡"}}</div>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app"
    })
</script>
</body>
</html>

(5)debounce过滤器

作用是延迟一段时间处理。一般与v-on指令结合使用。默认延迟时间300毫秒。如果监听用户的input事件，有时可用来防止频繁调用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input @keyup="onkeyup|debounce 3500"/>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        methods:{
            onkeyup:function(){
                alert("3500毫秒后执行onkeyup方法");
            }
        }
    })
</script>
</body>
</html>

3.自定义过滤器

首先，filter函数是一个挂载到Vue上的全局函数(打印window可观察到)，然后要说明的是它接收的参数，第一个过滤器的id名字，第二个是一个定义过滤器的function。下面从参数类型分别来讨论function。

(1)单个参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单个参数的自定义过滤器</title>
</head>
<body>
<div id="demo">
    <span v-text="message|reverse"></span>
</div>
<script src="js/vue.js"></script>
<script>
    console.log(window);
</script>
<script>
    Vue.filter("reverse",function(value){
        return value.split("").reverse().join("");
    })
    var vm=new Vue({
        el:"#demo",
        data:{
            message:"hello world!"
        }

    })
</script>
</body>
</html>

(2)多参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多参数的自定义过滤器</title>
</head>
<body>
<div id="demo">
    <span v-text="message |wrap ‘before‘ ‘end‘ "></span>
</div>
<script src="js/vue.js"></script>
<script>
    console.log(window);
</script>
<script>
    Vue.filter("wrap",function(value,begin,end){
        return begin+""+value+""+end;
    })
    var vm=new Vue({
        el:"#demo",
        data:{
            message:"hello"
        }

    });
</script>
</body>
</html>

(3)双向过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <p>{{message}}</p>
        <input type="text" v-model="message|filterExample"/>
    </div>
    <script src="js/vue.js"></script>
    <script>
        Vue.filter("filterExample",{
            read:function(val){
                return "read "+val;
            },
            write:function(newVal,oldVal){
                return oldVal+" write";
            }
        })
        new Vue({
            el:"#app",
            data:{
                message:"hello world"
            }
        })
    </script>
</body>
</html>

双向过滤器的DEMO

(4)动态参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <input v-model="userInput"/>
        <span>{{msg | concat userInput}}</span>
        <script src="js/vue.js"></script>
        <script>
            Vue.filter("concat",function(value,input){
                return value+input;
            });
            new Vue({
                el:"#app",
                data:{
                    msg:"hello",
                    userInput:""
                }
            })
        </script>
    </div>
</body>
</html>

4.自己写一个filter

注意点，过滤器的名字如果与内置过滤器冲突，内置过滤器会被覆盖。

双向过滤器的DEMO:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <p>{{message}}</p>
        <input type="text" v-model="message|filterExample"/>
    </div>
    <script src="js/vue.js"></script>
    <script>
        Vue.filter("filterExample",{
            read:function(val){
                return "read "+val;
            },           //第一次进入的时候执行read函数
            write:function(newVal,oldVal){
                return oldVal+" write";
            }           //当value值发生改变时，执行write函数。
        })
        new Vue({
            el:"#app",
            data:{
                message:"hello world"
            }
        })
    </script>
</body>
</html>

5.源码解析

(1)capitalize过滤器

capitalize: function capitalize(value) {
      if (!value && value !== 0) return ‘‘;
      value = value.toString();
      return value.charAt(0).toUpperCase() + value.slice(1);
      //charAt通过索引0取得首字母，然后通过toUpperCase()转化为大写，然后通过slice截取的从索引1开始的字符串，做加法。
    },

(2)uppercase过滤器

uppercase: function uppercase(value) {
      return value || value === 0 ? value.toString().toUpperCase() : ‘‘;
     //先转为字符串，然后进行大写
    },

(3)lowercase过滤器

lowercase: function lowercase(value) {
      return value || value === 0 ? value.toString().toLowerCase() : ‘‘;
     //先转字符串儿，然后小写
    },

第2章:Class与Style绑定

关于样式常常会操作元素的class列表和它的内联样式。

1.绑定HTML Class

(1)对象语法

传给v-bind:class一个对象，通过变量来动态切换class,该对象要么是对象字面量，要么是数据中直接的一个对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单个参数的自定义过滤器</title>
</head>
<body>
<div id="demo">
    <div class="static" v-bind:class="{‘didi-orange‘:isRipe,‘didi-green‘:isNotRipe}"></div>
    <div class="static" v-bind:class="ddfe"></div>
</div>
<script src="js/vue.js"></script>
<script>

    var vm=new Vue({
        el:"#demo",
        data:{
            isRipe:true,
            isNotRipe:false,
            ddfe:{
                didiAge:4,
                didiMember:6000
            }
        }

    })
</script>
</body>
</html>

渲染的效果为

另外，还可以绑定一个返回对象的计算属性。略。

(2)数组语法

2.绑定内联样式

时间： 2024-08-01 22:43:28

vue.js基础知识篇(4):过滤器、class与style的绑定2的相关文章

vue.js基础知识篇(6):组件详解

第11章:组件详解组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 Vue.js的组件注册分为全局注册和局部注册. 全局注册使用Vue.component方法.第一个参数是组件名字,第二个参数是组件的构造函数,要么是function,要么是object. <!DOCTYPE html> <html lang="en"> <hea

vue.js基础知识篇(1):简介、数据绑定、指令、计算属性、表单控件绑定和过滤器

目录第一章:vue.js是什么? 代码链接: http://pan.baidu.com/s/1qXCfzRI 密码: 5j79 第一章:vue.js是什么? 1.vue.js是MVVM框架 MVVM的代表框架是Angular.js,以及vue.js. MVVM的view和model是分离的,View的变化会自动更新到ViewModel上,ViewModel的变化会自动同步到View上显示.这种自动同步依赖于ViewModel的属性实现了Observer. 2.它与angular.js的区别相同

vue.js基础知识篇(2):指令详解

第三章:指令 1.语法指令以v-打头,它的值限定为绑定表达式,它负责的是按照表达式的值应用某些行为到DOM上. 内部指令有v-show,v-else,v-model,v-repeat,v-for,v-text,v-el,v-html,v-on,v-bind,v-ref,v-pre,v-cloak,v-if. 2.内部指令 (1)控制元素的显示与否:v-if,v-show.v-else v-if是真实的条件渲染,根据表达式的true/false在DOM中生成或移除一个元素. 第一,这个指令是惰性

vue.js基础知识篇(5):过渡、Method和Vue实例方法

第8章:过渡 1.CSS过渡 2.JavaScript过渡 3.渐进过渡第9章:method Vue.js的事件一般通过v-on指令配置在HTML中,虽然也可以在js的代码中使用原生的addEventListener方法添加事件监听,但并不推荐,因为它并不符合"关注点分离"的设计理念. 使用v-on指令有几点好处: 通过HTML模板(视图)就能看到js对应的方法;无需手动绑定事件,ViewModel和DOM完全解耦.易于测试;当一个ViewModel被销毁时,所有的事件处理器都会被自

vue.js基础知识篇(3):计算属性、表单控件绑定

第四章:计算属性为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div id="example"> <

vue.js基础知识篇(8):与服务端通信

vue.js可以构建一个完全不依赖后端服务的应用APP,同时也可以与服务端进行数据交互来同步界面的动态更新.vue-resource实现了基于AJAX.JSONP等技术的服务端通信. 第十三章:与服务端通信 1.安装和配置vue-resource 安装方法:使用script标签引入. (1)参数配置.分为全局配置.组件实例配置和调用配置3部分,其优先级依次增高. 第一,全局配置. (2)headers配置 XXX 2.基本HTTP调用 (1)底层方法 (2)便捷方法 (3)请求选项对象 (4)r

简单易懂的 Vue.js 基础知识！

根 vue 实例 let viewModel = new Vue({ // 包含数据.模板.挂载元素.方法.生命周期钩子等选项 }) Hello Wrold  <div id="app"> Hello {{ name }}! </div> // 这是我们的 Model var model = { name: 'Vue.js' } // 创建一个 Vue 实例或 "viewModel" //

vue,js基础知识

Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项目整合. 1.1 Vue.js的目的 Vue.js的产生核心是为了解决如下三个问题: 解决数据绑定的问题: Vue.js框架生产的主要目的是为了开发大兴单页面应用(SPA:Single Page Application) Angular.js中对PC端支持的比较良好,但是对移动端支持就一般.而Vue.js主要支持移动端,也支持PC端. 3. 它还支持组件化.也就

vue.js基础知识总结

初始化一个项目 npm init -y 安装一些依赖 npm install 名称 --save 例如 npm install vue axios bootstrap --save --save 表示开发和上线都要用 --save dev 表示开始时候用,上线丢掉 vue总结 1.指令 v-show 切换显示隐藏,频繁显示使用 v-if 根据条件语句可以显示隐藏,不频繁显示隐藏使用 v-else 前面有v-if 配合使用,如果前面v-if不成立情况下 v-model 双向数据绑定的关键所在,视图