Vue笔记【八】【列表过滤】【列表排序】【表单数据收集】【Vue命令】

最新推荐文章于 2025-03-12 10:45:30 发布

念故思旧

最新推荐文章于 2025-03-12 10:45:30 发布

阅读量143

点赞数

分类专栏： Vue2学习文章标签： vue.js 笔记 javascript

本文链接：https://blog.youkuaiyun.com/weixin_56612338/article/details/133926535

版权

Vue2学习专栏收录该内容

15 篇文章

订阅专栏

16 列表过滤

对列表进行过滤，筛选符合条件的结果

16.1监视实现

16.1.1示例代码

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <h1>{{msg}}</h1>
        <input type="text" placeholder="请输入:" v-model="keyword">
        <table border="1px">
            <tr>
                <th>序号</th>
                <th>英雄</th>
                <th>能量</th>
                <th>选择</th>
            </tr>
            <tr v-for="(hero,index) in filteredHeros" :key="hero.id">
                <td>{{index+1}}</td>
                <td>{{hero.name}}</td>
                <td>{{hero.power}}</td>
                <td><input type="checkbox"></td>
            </tr>
        </table>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成生产提示
    //创建Vue实例
    new Vue({
        el: '#root',
        data: {
            msg: '列表过滤',
            heros: [
                { id: '101', name: '艾格文', power: 10000 },
                { id: '102', name: '麦迪文', power: 9000 },
                { id: '103', name: '古尔丹', power: 8000 },
                { id: '104', name: '萨尔', power: 6000 }
            ],
            keyword: '',
            filteredHeros: []
        },
        watch: {
            keyword: {
                immediate: true,
                handler(val) {
                    this.filteredHeros = this.heros.filter((hero) => {
                        return hero.name.indexOf(val) >= 0
                    })
                }
            }
        }
    });
</script>

</html>

16.1.2运行结果

在这里插入图片描述

16.2计算属性实现

16.2.1示例代码

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <h1>{{msg}}</h1>
        <input type="text" placeholder="请输入:" v-model="keyword">
        <table border="1px">
            <tr>
                <th>序号</th>
                <th>英雄</th>
                <th>能量</th>
                <th>选择</th>
            </tr>
            <tr v-for="(hero,index) in filteredHeros" :key="hero.id">
                <td>{{index+1}}</td>
                <td>{{hero.name}}</td>
                <td>{{hero.power}}</td>
                <td><input type="checkbox"></td>
            </tr>
        </table>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成生产提示
    //创建Vue实例
    new Vue({
        el: '#root',
        data: {
            msg: '列表过滤',
            heros: [
                { id: '101', name: '艾格文', power: 10000 },
                { id: '102', name: '麦迪文', power: 9000 },
                { id: '103', name: '古尔丹', power: 8000 },
                { id: '104', name: '萨尔', power: 6000 }
            ],
            keyword: '',
        },
        computed: {
            filteredHeros() {
                return this.heros.filter((hero) => {
                    return hero.name.indexOf(this.keyword) >= 0
                })
            }
        }
    });
</script>

</html>

运行结果如上

17 列表排序

17.1示例代码

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <h1>{{msg}}</h1>
        <input type="text" placeholder="请输入:" v-model="keyword"><br><br>
        <button @click="type = 1">升序</button>
        <button @click="type = 2">降序</button>
        <button @click="type = 0">原序</button>
        <table border="1px">
            <tr>
                <th>序号</th>
                <th>英雄</th>
                <th>能量</th>
                <th>选择</th>
            </tr>
            <tr v-for="(hero,index) in filteredHeros" :key="hero.id">
                <td>{{index+1}}</td>
                <td>{{hero.name}}</td>
                <td>{{hero.power}}</td>
                <td><input type="checkbox"></td>
            </tr>
        </table>
    </div>
</body>

<script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成生产提示
    //创建Vue实例
    new Vue({
        el: '#root',
        data: {
            msg: '列表过滤',
            type: 0,
            heros: [
                { id: '101', name: '艾格文', power: 10000 },
                { id: '102', name: '麦迪文', power: 9000 },
                { id: '103', name: '古尔丹', power: 8000 },
                { id: '104', name: '萨尔', power: 11000 }
            ],
            keyword: '',
        },
        computed: {
            filteredHeros() {
                const arr = this.heros.filter((hero) => {
                    return hero.name.indexOf(this.keyword) >= 0
                })
                // 排序
                if (this.type === 1) {
                    arr.sort((a, b) => {
                        return a.power - b.power
                    })
                } else if (this.type == 2) {
                    arr.sort((a, b) => {
                        return b.power - a.power
                    })
                }
                return arr;
            }
        }
    });
</script>

</html>

17.2运行结果

在这里插入图片描述

18 表单数据的收集

18.1文本密码数字输入框

用户名：<input type="text" v-model.trim="vue中绑定的属性">
密码：<input type="password" v-model="vue中绑定的属性">
年龄：<input type="number" v-model.number="vue中绑定的属性">

v-model双向数据绑定，默认是获取value的值，trim作用是去除空格

number表示获取的为数字

18.2 单选框

性别：
    男<input type="radio" name="gender" value="1" v-model="vue中绑定的属性">
    女<input type="radio" name="gender" value="0" v-model="vue中绑定的属性"><br><br>

v-model双向数据绑定，默认是获取value的值，不设置value的话默认提交的是null，所以这里我们要设置value属性并且给出要提交的值

18.3 复选框

爱好：
   旅游<input type="checkbox" v-model="vue中绑定的属性" value="travel">
   运动<input type="checkbox" v-model="vue中绑定的属性t" value="sport">
   唱歌<input type="checkbox" v-model="vue中绑定的属性" value="sing"><br><br>

注意：对于checkbox来说，如果没有手动指定value，那么会拿这个标签的checked属性的值作为value

18.4 下拉列表

学历：
    <select v-model="user.grade">
      <option value="">请选择学历</option>
      <option value="zk">专科</option>
      <option value="bk">本科</option>
      <option value="ss">硕士</option>
    </select><br><br>

注意：v-model双向数据绑定，默认是获取value的值，不设置value默认获取的是option标签之间的value

18.5 文本域

简介：
    <textarea cols="50" rows="15" v-model.lazy="vue中绑定的属性"></textarea><br><br>

18.6 form表单如何取消提交

我们大多数向后台提交数据一般都是异步请求，这时我们就需要阻止from表单默认的提交方式

第一种方式

<form @submit.prevent="处理方法">
</form>

第二种方式

form表单的提交按钮设置为以下方式

<button @click.prevent="处理方法">注册</button>

18.7 如何传json格式的字符串

为了防止向后台提交数据时把msg也传过去，我们可以把需要向后台提交的数据封装到一个对象中

<form>
    ...
    <button @click.prevent="send">注册</button>
</form>
<script>
        const vm = new Vue({
            el: '#app',
            data: {
                user: {
                    username: '',
                    password: '',
                    age: '', 
                    gender: '',
                    interest: [],//复选框选择的数据可以放在数组中
                    grade: 'ss',
                    introduce: '',
                    accept: ''
                },
                msg: '表单数据的收集'
            },
            methods: {
                send() {
                    alert('ajax...!!!!')
                    // 将数据收集好，发送给服务器。
                    console.log(JSON.stringify(this.user))
                }
            }
        })
    </script>

19 Vue的一些指令

19.1 v-test

这个指令就相当于原生JS中的innerText，

用法:

<h1 v-text="Vue中配置的属性"></h1>

19.2 v-html

这个指令就相当于原生JS中的innerHtml，这个不建议用，容易造成代码恶意注入

<h1 v-html="vue注册的属性"></h1>

19.3 v-cloak

这个指令作用是防止页面在加载时出现{{}}的情况，一般搭配style使用

<style>
        [v-cloak] {
            display: none;
        }
</style>

 <div id="">
     <h1 v-cloak>{{vue中注册的属性}}</h1>
 </div>

19.4 v-pre

使用该指令可以提高编译速度。带有该指令的标签将不会被编译。可以在没有 Vue 语法规则的标签中使用

可以提高效率。不要将它用在带有指令语法以及插值语法的标签中

<h1 v-pre>{{vue中注册的属性}}</h1>