Vue过滤案例、按键修饰符、数据双向绑定

一、v-for能循环的类型

  1. 数组、带索引
  2. 对象、默认value值、也可以是key值
  3. 字符串、带索引
  4. 数字、带索引

二、js的几种循环方式

  1. js的循环基于索引的循环
  2. js的in循环拿到的是索引
  3. es6语法 of循环
  4. 数组的方法 forEach循环
  5. jQuery的循环 循环数组、对象

三、key值的解释

之前我们用v-for放在标签上，其实标签上还可以放key，但是key值必须是唯一，不然就程序报错，用属性指令绑定一个变量，key的值每次都不一样，这样可以加速虚拟DOM的替换。想要专业一些那就尽量写这个方式

<div v-for="item in 8" :key="item">{{item}}</div>

四、数组、对象的检测与更新

对象，新增一个key-value，发现页面没有变化，以后设置下即可。

Vue.set(this.info，"hobby’，'篮球')

五、input的几个事件

属性名称 中文名称 解释用法
click 点击事件 点击按钮时触发
input 输入事件 输入内容时触发
change 改变事件 发生变化时触发
blur 失去焦点 失去焦点时触发
focus 聚焦事件 焦点聚焦时触发

六、事件修饰符

事件修饰符 解释含义
.stop 只处理自己的阻止事件冒泡
.self 只处理自己的不处理子事件
.prevent 阻止a链接的跳转
.once 事件只触发一次(适用于抽奖页面)

七、按键修饰符

类似于键盘映射，按了键盘的那个键就会触发其对应的函数并执行下面介绍一下具体用法





箭头函数写法演变过程

定义函数

@keyup="handleKeyUp"

按键修饰符

@keyup.enter # 可以是键盘对应的英文单词

@keyup.13 # 或数字对应关系也是可以的

# keycode对照表链接

https://www.cnblogs.com/guochaoxxl/p/16753266.html

八、表单控制

  1. radio 单选
  2. checkbox 单选和多选

九、过滤案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/Vue.js"></script>

</head>

<body>

<div id="aaa">

    <h1>filter example</h1>

    <p>pls enter sth: <input type="text" v-model="myText" @input="handleInput"></p>

    <ul>

        <li v-for="item in newDataList">{{item}}</li>

    </ul>

</div>

</body>

<script>

    var vm = new Vue({

        el:'#aaa',

        data:{

            myText:'',

            dataList:['a','an','any','be','beyond','cs','css'],

            newDataList:['a','an','any','be','beyond','cs','css'],

        },

        methods:{

            handleInput(){

                this.newDataList = this.dataList.filter(

                    item => item.indexOf(this.myText) >=0

                )

            },

        },

    })

</script>

</html>

十、购物车案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/Vue.js"></script>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->

    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<body>

<div id="app">

    <h1 class="text-center ">SHOPPING CAR LIST</h1>

    <div>

        <div class="row">

            <div class="col-lg-4"></div>

            <div class="col-lg-4">

                <table class="table table-hover" @click="clickToSum">

                    <thead>

                    <tr>

                        <th>goods</th>

                        <th>price</th>

                        <th>quantity</th>

                        <th>select</th>

                        <th>

                        </th>

                    </tr>

                    </thead>

                    <tbody>

                    <tr v-for="(shopping, index) in shoppingList" :key="index">

                        <th>{{shopping.name}}</th>

                        <th>{{shopping.price}}</th>

                        <th><input type="number" v-model="shopping.num" width="10px"></th>

                        <th><input type="checkbox" v-model="selectList" :value="index"></th>

                    </tr>

                    </tbody>

                </table>

                <p>

                    <span>total:{{summary}}RMB</span>

                </p>

            </div>

            <div class="col-lg-4"></div>

        </div>

    </div>

</div>

</body>

<script>

    var vm = new Vue({

        el: '#app',

        data: {

            allSelect: false,

            selectList: [],

            shoppingList: [

                {id: 1, name: 'iPhone', price: 13000, num: 2},

                {id: 2, name: 'iPad', price: 10000, num: 2},

                {id: 3, name: 'laptop', price: 15000, num: 2},

            ],

            summary: 0

        },

        methods: {

            clickToSum() {

                setTimeout(this.getSum, 10)

            },

            getSum() {

                var total = 0

                for (index of this.selectList) {

                    let shopping = this.shoppingList[index]

                    total += shopping.price * shopping.num

                }

                this.summary = total

            },

        },

    })

</script>

</html>

Vue过滤案例、按键修饰符、数据双向绑定的更多相关文章

  1. vue 自定义全局按键修饰符

    在监听键盘事件时,我们经常需要检查常见的键值.Vue 允许为 v-on 在监听键盘事件时添加按键修饰符: JS部分: Vue.config.keyCodes = { f2:113, } var app ...

  2. Vue源码学习(一）———数据双向绑定 Observer

    从最简单的案例,来学习Vue.js源码. <body> <div id='app'> <input type="text" v-model=" ...

  3. Vue学习笔记六：v-model 数据双向绑定

    目录 v-model简介和适用范围 新建HTML 所见即所得 v-model模拟简易计算器 v-model简介和适用范围 Vue的一大特点之一就是数据的双向绑定,v-model就是实现这个功能的指令, ...

  4. 「Vue」自定义按键修饰符

    vue.config.keyCodes.f2 = 113 设置完成后就可以绑定f2的按键操作@keyup.f2="add" 自带的有enter esc delete 空格 上下左右 ...

  5. vue.js组件之间通讯的数据双向绑定----父亲把数据传递给儿子，儿子更改数据后，重新发送给父亲，父亲数据更改后，属性会重新发送个儿子，儿子刷新新数据

    vue组件是相互独立的,如果要交互通讯,这时候,就需要组件之间数据互通了 往常我们讲的都是数据传递,子传父,父传子,都没有说子和父,父与子之间的数据互通 父亲传递给儿子数据,儿子触发一个父亲方法,将最 ...

  6. Vue.js线程机制问题还是数据双向绑定有延迟的问题

    最近用select2做一个下拉多选,若只是从后端获取一个列表渲染还好说,没有任何问题.但要用select2对数据初始化时进行selected的默认选项进行显示,就出现问题了. vm.$set('are ...

  7. vue 利用v-model实现父子组件数据双向绑定

    v-model父组件写法: v-model子组件写法: 子组件export default中的model:{}里面两个值,prop代表着我要和props的那个变量相对应,event表示着事件,我触发事 ...

  8. Vue学习笔记十一：按键修饰符和自定义指令(钩子函数)

    目录 padStart:补位 按键修饰符 Vue提供的按键修饰符 自定义按键修饰符 自定义指令 自定义指令的使用 钩子函数 钩子函数参数 使用钩子函数的bingding参数 私有自定义指令 钩子函数的 ...

  9. vue学习 `${HH}-${mm}-${dd}` 按键修饰符

    vue 有一种拼接字符串的规范写法 //键盘 Tab 键 上边的键 英文输入状态 然后采用类似EL表达式${变量}return `${}:${}:${}` //有时候我们经常在输入完密码之后,按回车E ...

  10. 第六十二篇：Vue的双向绑定与按键修饰符

    好家伙,依旧是vue的基础 1.按键修饰符 假设我们在一个<input>框中输入了12345,我们希望按一下"Esc" 然后删除所有前面输入的内容,这时候,我们会用到按 ...

随机推荐

  1. Linux内存泄露案例分析和内存管理分享

    作者:李遵举 一.问题 近期我们运维同事接到线上LB(负载均衡)服务内存报警,运维同事反馈说LB集群有部分机器的内存使用率超过80%,有的甚至超过90%,而且内存使用率还再不停的增长.接到内存报警的消 ...

  2. Training: MySQL I

    原题链接:http://www.wechall.net/challenge/training/mysql/auth_bypass1/index.php 题目告诉我们这是一个经典的mysql注入挑战,我 ...

  3. win 10 玩红警/黑边，不能全屏，闪退

    win 10玩红警黑边问题 1.下载ddraw.dll,放在游戏目录 下载链接:ddraw.dll 如果提示 选择保留就行了 2.Win 键+S键,搜索注册表,打开这个 进去按这个路径    计算机\ ...

  4. vue3 第二天vue响应式原理以及ref和reactive区别

    前言: 前天我们学了 ref 和 reactive ,提到了响应式数据和 Proxy ,那我们今天就来了解一下,vue3 的响应式 在了解之前,先复习一下之前 vue2 的响应式原理 vue2 的响应 ...

  5. Leetcode-SQL学习计划-SQL入门-584：寻找用户推荐人

    建表语句: Create table If Not Exists Customer (id int, name varchar(25), referee_id int) Truncate table ...

  6. Linux常用软件的安装及Nginx的使用

    主要内容: 软件安装方式 上传与下载工具 常用软件的安装--jdk.tomcat.mysql.redis 项目的部署 Nginx的安装 Nginx的功能 静态网站部署 虚拟主机配置及端口绑定 域名绑定 ...

  7. 【Scala复习】基础知识、函数式编程、面向对象、集合、隐式转换、模式匹配、泛型

    重点版 详细版 基础知识常量和变量尽量使用常量val别使用变量var变量的命名数字字母下划线_特殊的用法数据类型java基本数据类型引用数据类型scalaAny-对象的根类AnyVal-数值类型Lon ...

  8. 多种方法实现单例模式 pickle模块

    目录 单例模式 类方法@classmethod实现 元类实现 模块实现 装饰器实现 双下call.反射实现 pickle序列化模块 单例模式 比如系统调用打印机,不管你要打印几次,都是调用同一个打印机 ...

  9. MySQL的安装与配置，图形化软件安装，以及IDEA上的配置操作

    1. MySQL安装详细教程 注意:本次安装例为随笔发布时最新的8.0.31版本教程,由于您所希望安装的版本不同可能会导致一些问题,请谅解. 进入官网下载界面 https://www.mysql.co ...

  10. ORM增删改查 django请求生命周期图 django路由层及反向解析

    目录 可视化界面之数据增删改查 1.建表 2.数据展示功能 3.数据添加功能 4.数据编辑功能 5.数据删除功能 django请求生命周期流程图 django路由层 1.路由匹配 2.转换器功能 pa ...