Vue第二天过滤器和修饰符_this.listofdata.filter-CSDN博客

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="../vue-2.4.0.js"></script>
    <style>
        .box{
            color: red;
        }
        .box2{
            color: blue;
        }
        .box3{
            color: yellow;
        }
        .fs40{
            font-size: 40px;
        }
        .red{
            color: red;
        }
        .pink{
            color: hotpink;
        }
    </style>
</head>
<body>
    <div id='app'>
        <div class="box">哈哈</div>
        <div class="box">哈哈</div>
        <div class="box" style="color:green;">哈哈</div>
        <button @click="changecolor"></button>
        


        <!-- 数组 -->
        <div :class="['box', 'fs40']">红色字</div>
        <!-- 三目表达式 -->
        <div :class="flag? 'pink': 'fs40'">红色字2</div>
        <div :class="age>20? 'pink': 'fs40'">红色字2</div>

        <div :class="['red',age>20? 'pink': 'fs40']">红色字2</div>
        <!-- 对象  属性是布尔 -->
        <div :class="{pink:flag,fs40:flag}">红色3</div>
        <!-- 数组内置对象 -->
        <div :class="['red',{fs40:flag}]">红色4</div>

    <script>
    const vm = new Vue({
        el: '#app',
        data: {
            box:"box2",
            flag:true,
            age:18,
        },
        methods: {
            changecolor(){
                this.box = "box3"
            }
        },
    })
    </script>
</body>
</html>

使用内联样式

直接在元素上通过 :style 的形式，书写样式对象
将样式对象，定义到 data 中，并直接引用到 :style 中
1. 在data上定义样式
2. 在元素中，通过属性绑定的形式，将样式对象应用到元素中
在 :style 中通过数组，引用多个 data 上的样式对象
1. 在data上定义样式
2. 在元素中，通过属性绑定的形式，将样式对象应用到元素中

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="../vue-2.4.0.js"></script>
    <style>
        .box{
            color: red;
        }
        .box2{
            color: blue;
        }
        .box3{
            color: yellow;
        }

        .fs40{
            font-size: 40px;
        }
        .red{
            color: red;
        }
        .pink{
            color: hotpink;
        }
    </style>
</head>
<body>
    <div id='app'>
        <div style="color: red;font-size: 40px;">今天下雨</div>

        <!-- 对象 -->
        <div :style="style1">今天下雨</div>
        <!-- 数组里是对象 -->
        <div :style="[style2,style3]">今天有雨啊</div>
        <!-- 绑定方法，拿到返回值 -->
        <div :style="getStyle()">今天下雨啊啊</div>
        <div @click="changeColor">点我换颜色</div>
    </div>

    <script>
    const vm = new Vue({
        el: '#app',
        data: {
            box:"box2",
            flag:true,
            age:18,

            style1:{color:'red','font-size':'40px'},
            style2:{color:'pink'},
            style3:{'font-size':"40px"},
        },
        methods: {
            changeColor(){
                this.style1.color = 'blue'
            },
            getStyle(){
                return{color:'red',fontSize:'50px'}
            }
        }
    })
    </script>
</body>
</html>

二、品牌案例

实现功能：

1. 添加新品牌

2. 删除品牌

3. 根据条件筛选品牌

步骤：

1．1、搭建项目的基本界面的结构

引入bootstrap
引入vue

2、实现表格的渲染

使用v-for进行表单的渲染

注意设置key属性

<tr v-for='item in list' :key="item.id">
    <td>{{item.id}}</td>
    <td v-text="item.name"></td>
    <!-- 用法就是在变量后面加上竖线 加上过滤器的名称 -->
    <td>{{item.ctime | dateFormat('')}}</td>
    <td>
        <!-- 阻止一下a标签的默认事件 -->
        <a href="#" @click.prevent='del(item.id)'>删除</a>
    </td>
</tr>

3、实现新增的功能

数据绑定，为了能在后面拿到这数据。
定义一个方法，给按钮添加一个事件。

点击这个按钮之后为什么会进行页面的刷新，因为这个按钮是定义在表单里的，所以点击这个按钮会触发表单的提交，这个时候可以组织按钮的默认事件。
绑定事件的方法可以加括号也可以不加，加上括号之后可以给这个方法传递参数。

示例：

add() {
    console.log(this.id, this.name);
    // 表单校验
    // 1、通过遍历的方式实现
    // let flag = true;
    // for (let item of this.list) {
    //     if (item.id == this.id) {
    //         flag = false;
    //     }
    // }
    // if (!flag) {
    //     alert('您输入的id已经存在了')
    //     return;
    // }
    // 1、使用es6的新语法
    let flag = this.list.some(item => {
        if (item.id == this.id) {
            return true;
        } else {
            return false;
        }
    })

    if (flag) {
        alert('您输入的id已经存在了')
        return;
    }

    // 1.拿到输入的数据
    // 2.用这个数据构造一个对象
    // 3.可以调用数组的方法把这个对象，插入到数组里
    // 4.因为vue已经帮我们实现了双向绑定。Vue会监听数据的改变，数据改变之后，vue会帮我们渲染到指定地方。
    // 如果能理解第四步，我们的vue就算入门了，我们只关心数据是怎么变的，我们业务逻辑是什么就行了
    let obj = {
        id: this.id,
        name: this.name,
        ctime: new Date()
    }
    this.list.push(obj);
    // this.id = '';
    // this.name = '';
    this.id = this.name = '';
}

4、实现删除的功能

思路

获取删除元素的索引
1. 要想获取索引，需要先获取id，这个id可以传在调用方法的时候传进
2. 根据id获取索引
  1. 遍历的方式
  2. 通过es6提供的some方法

调用数组的方法进行删除2、
使用数组的splice方法

示例：

del(id) {
    // 删除元素的id
    // console.log(id);
    // 数组中删除，先知道这个元素的索引
    // 通过这个splice()方法我们就可以把元素从数组中删除
    // 1.获取索引
    // 最简单的方法
    // for(let item of this.list){
    //     if(item.id == id){
    //         // indexOf会找到数组的下标，如果不存在就返回-1
    //         console.log(this.list.indexOf(item))
    //         break;
    //     }
    // }
    // 还可以使用foreach遍历
    //2.使用some方法
    // this.list.some((item, index) => {
    //     if (item.id == id) {
    //         console.log(index)
    //         return true;
    //     }
    // })
    // 3. es6获取数组索引的方法findIndex()
    let index = this.list.findIndex(item => {
        if (item.id == id) return true;
    })
    // 里面的两个参数，第一个是下标，第二个是删除的个数
    this.list.splice(index, 1);
}

5、实现过滤的功能

1. 先去获取输入的内容

2. 我们应该给列表加一层过滤，返回满足条件的列表

注意：使用v-for遍历的时候可以用一个方法代替数组，这个方法需要返回一个新数组

示例：

// html
<tr v-for='item in searchList()' :key="item.id">
    <td>{{item.id}}</td>
    <td v-text="item.name"></td>
    <!-- 用法就是在变量后面加上竖线 加上过滤器的名称 -->
    <td>{{item.ctime}}</td>
    <td>
        <!-- 阻止一下a标签的默认事件 -->
        <a href="#" @click.prevent='del(item.id)'>删除</a>
    </td>
</tr>

// js...
searchList() {
    // 根据我们输入的关键字去构建一个新的列表
    // 1.遍历这个数组，拿到一个新的数组
    // let newList = [];
    // this.list.forEach(item => {
    //     if (item.name.includes(this.keyword)) {
    //         newList.push(item);
    //     }
    // })
    // return newList;
    // 2.ES6里的filter方法
    // filter方法直接会返回一个新的数组
    let newList = this.list.filter(item => {
        // filter的回调方法中返回的是bool值，如果这个bool值是true的话就会被加入到新的数组中
        if (item.name.includes(this.keyword)) {
            return true;
        }
    })
    return newList;
}

三、过滤器

概念

Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符指示。

作用

在我们页面显示值之前加一层过滤，展示我们过滤后的值

注意事项

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

使用语法

{{变量 | 过滤器名}}
{{变量 | 过滤器 | 另一个过滤器}} 可以同时使用多个过滤器，后面过滤器的data就是前面表达式传过来的值

定义语法

全局定义：

通过Vue提供的filter方法定义：Vue.filter()

参数：过滤器的名字和过滤器执行函数

2、私有定义

filters这个是实例化Vue的一个参数，和data,methods平级的，里面放的就是我们这个实例的私有过滤器。

注意事项

函数的第一个参数都是data，也就是我们要过滤的值。
过滤器可以自定义一些参数。
过滤器函数的返回值就是最终显示的值

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="../vue-2.4.0.js"></script>
    
</head>
<body>
    <div id='app'>
        通过Vue提供的filter方法定义:Vue.filter()
        参数:过滤器的名字和过滤器执行函数

        圆的半径是{{num}}
        圆的面积是{{num | getSize}}
        圆的面积是{{num | getSize2}}
    </div>
    <div id='app2'>
        通过Vue提供的filter方法定义:Vue.filter()
        参数:过滤器的名字和过滤器执行函数

        圆的半径是{{num}}
        圆的面积是{{num | getSize}}
    </div>
    <script>
        //全局
        //1、定义在vue实例化前
        //2、通过vue提供的filter方法定义：Vue.filter（过滤器的名字，过滤器执行函数）
        //参数：过滤器的名字和过滤器执行函数
        //如果使用了过滤器，最终页面显示内容是return的值

        Vue.filter("getSize", function(data,format){
            return Math.PI*data*data
        })
        //局部定义
    const vm = new Vue({
        el: '#app',
        data: {
            num:10
        },
        methods: {
        },
        //私有定义
        filters:{
            getSize2(data,format){
                return Math.PI*data*data
            },
        }
    })
    const vm2 = new Vue({
        el: '#app2',
        data:{
            num:10
        },
        methods:{

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

四、键盘修饰符

1 注册一个监听按键事件

监听所有按键：v-on:keyup
监听指定按键：v-on:keyup.按键码

注意：每个键盘按键都会对应一个键盘码，可以参照这个网站按键码对应网址。

2 使用按键别名

vue提供的按键别名

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

举例：如何使用v-on:keyup.按键别名？

答：监听enter按键；v-on:keyup.enter

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="../vue-2.4.0.js"></script>
    
</head>
<body>
    <div id='app'>
        <div @keyup="up">AAAAAA</div>

        <input @keyup="up" @keydown="down" type="text">
        aaaaaaaa
        <input @keyup.65="up" type="text">
        <input @keyup.a="up" type="text">
        enter
        <input @keyup.13="up" type="text">
        <input @keyup.enter="up" type="text">
        tab
        <input @keyup.prevent.tab="up" type="text">
        f5
        <input @keyup.116="up" type="text">
        <input @keyup.tab="up" type="text">
        <input @keyup.tab="up" type="text">
        <input @keyup.tab="up" type="text">
        <input @keyup.tab="up" type="text">
        <input @keyup.tab="up" type="text">
        <input @keyup.tab="up" type="text">
        <input @keyup.tab="up" type="text">
    </div>

    <script>
        //自定义按键别名
        Vue.config.keyCodes.a = 65
    const vm = new Vue({
        el: '#app',
        data: {
        },
        methods: {
            up(){
                console.log('up');
            },
            down(){
                console.log('down');
            }
        }
    })
    </script>
</body>
</html>

六、自定义指令

1 全局定义

使用这个方法进行全局定义：Vue.directive()

参数：

1. 指令的名字（定义的时候不加v-,使用vue指令的时候加上v-）

2. 对象，里面包含三个钩子方法

bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
inserted 这个元素已经渲染到界面上之后执行
update 当元素有更新的时候执行

3. 这三个方法的参数有哪些

el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated钩子中可用。无论值是否改变都可用。

私有定义

实例里有个directives属性，这个属性是个对象
里面放的就是我们指令，这个对象键就是指令的名字，后面的对象就是指令的内容，和全局定义是一样的
简写直接写一个函数，函数名就是指令的名字，其他和全局定义是一样的。

示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="../vue-2.4.0.js"></script>
</head>
<body>
    <div id='app'>
        <div v-mycolor="'red'">看下我是什么颜色</div>
        <div v-mucolor="'green'">看下我是什么颜色</div>
        <input v-mycolor="'red'" type="text">
    </div>
    <div id='app2'>

        <div v-mycolor2="'red'" > 看下我是什么颜色2</div>
        <div v-mycolor2="'green'" > 看下我是什么颜色2</div>

        <input  v-mycolor="'red'" type="text" v-model="color" name="" id="">


        <input v-myfocus='' type="text">
        <input v-myfocus='' type="text">
        <input v-myfocus='' type="text">
        <input v-myfocus='' type="text">
        <input v-myfocus='' type="text">
        <input v-myfocus='' type="text">
    </div>


    <script>

        // 5.1全局定义
        //使用这个方法进行全局定义:Vue.directive()
        Vue.directive('mycolor',{
            bind(el,binding){
                console.log(el);
                console.log(binding);
                el.style.color = "red"
                el.style.color = binding.value
            },
            inserted(el){
                console.log(el);
            },
            update(el){
                console.log(el);
            }
        })

        Vue.directive('myfocus',{
            inserted(el){
                el.focus()
            },
        })







    const vm = new Vue({
        el: '#app',
        data: {
            color:'red'
        },
        methods: {
        },
        directive:{
            mycolor2(el,binding){
                el.style.color = binding.value
            }
        }
    })
    </script>
</body>
</html>