v-for/input事件/表单控制/v-model/箭头函数

目录

v-for的循环方式

数组/字典/字符串/数字


<div id="app">
    <p v-for="(item,index) in l1">{{index}}---{{item}}</p>
    <!-- index是循环遍历次数默认从0开始，item是值-->
    <p v-for="(value,key) in d1">{{key}}:{{value}}</p>
    <!-- 这样可以循环遍历展示字典的key和value-->
    <p v-for="(value) in d1">{{value}}</p>
    <!-- 如果只有一个变量默认显示的是字典的值-->
    <p v-for=" (item,index) in 8">数字：{{index}}:{{item}}</p>
    <!-- 也可以直接设置循环几次，值默认从1开始，索引默认从0开始-->
    <p v-for=" (item,index) in s1">数字：{{index}}:{{item}}</p>
    <!-- 也可以对字符串进行循环遍历-->
</div>


<script>
    var l2 = [2, 3, 4]
    new Vue({
        el: '#app',
        data: {
            name: 'moon',
            l1: [1, 2, 3],
            d1: {'name': 'moon', 'age': 18, l2},
            s1: 'holle'
            // 字典中也可以直接带上数组
        }})
</script>

原生js的循环方式

1.循环列表 根据索引循环 2.用in循环 3.of循环 4.数组内置方法 forEach循环

<script>
    for (i = 0; i < 5; i++) {
        // for（起始条件；终止条件；循环中的操作）
        console.log(i)
    }

    // 1.循环列表
    var l1 = ['11', '22', '33']
    for (i = 0; i < l1.length; i++) {
        // for（起始条件；终止条件；循环中的操作）
        console.log(l1[i])
        // 根据索引循环取列表中的值
    }


    // 2.用in循环 默认只能拿到索引
    var l2 = ['33', '44', '55']
    for (item in l2) {
        console.log(l2[item])
        // item=0,1,2
    }


    // 3.of循环 这样就可以直接拿到里面的值
    var l3 = ['66', '77', '88']
    for (i of l3){
        console.log(i)
        // i = '66', '77', '88'
    }

    
    // 4.数组内置方法循环 forEach循环
    var l4 = ['aa', 'bb', 'cc']
    l4.forEach(function (item) {
        console.log(item)
    })
    
    
</script>

v-for中key值方法的解释

#  vue的v-for写在标签上，在标签上加一个key，用属性指令绑定一个变量，key的值每次都不一样，这样可以加速虚拟dom的替换，从而提高循环效率，key值必须唯一
 <div v-for="item in 8" :key="item">{{item}}</div>
        
 # 这样可以使循环出来的每一个标签都是唯一的，
 # 需要给对象里面的每一项都绑定上一个唯一的标识
 # 这个时候就可以用到我们的这个 key 了

vue中数组和对象的检测更新

遇到数据变了页面没有变的情况需要用Vue.set

通过事件给页面数据发送变化 例如修改或新增数据 ，修改数据页面可以时时展示，
新增数据 需要使用Vue.set来新增才可以时时获取

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            info: ['name','moon', 'age',]
        },
        methods: {
            handleAdd() {
                // this.info['hobby'] = '篮球'
                // 直接增加值 页面是不会时时变化的
                // this.info['name'] = 'nbmoon'
                // 修改值页面是可以时时变化的

                Vue.set(this.info,'6','篮球')
                // this.info是字典那就是 key，value
                // this.info如果是数组 索引位置，value，索引位置有值就更改 无则新增
                // 对于需要新增的数据 使用Vue.set方法进行新增 可以时时变化

            }
        }})
</script>

input事件

# input 的事件：
	  click 当输入框被点击时      触发的事件
    input	当输入框进行输入的时候 触发的事件
    change	当元素的值发生改变时 触发的事件
    blur	当输入框失去焦点的时候 触发的事件
    focus 当获得焦点，触发事件 不要搭配alert弹窗使用 会无限循环触发

    
<div id="app">
    点击事件<input type="text" @click="handleClick">
    聚焦事件<input type="text" @focus="handleFocus">
    <!-- 聚焦事件是只要点击了输入框就会立刻触发-->
    失去焦点事件<input type="text" @blur="handleBlur">
    input事件<input type="text" @input="handleInput">
    <!-- input事件是要在输入框里输入内容就会立刻触发-->
    变化事件<input type="text" @change="handleChange">
    <!-- input事件是要在输入框失去焦点后里面内容有变化才会触发-->
</div>

v-model双向数据绑定和方法

将input内的值和外面的值做双向绑定 有任何更改都会同时变化

<body>
<div id="app">
    <input type="text" v-model="name">---{{name}}
</div>


</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
           name:'moon'
        },
    })
</script>


<input type="text" v-model.lazy="text1"> {{text1}}
lazy方法：等待input框在输入数据 失去焦点后 才会进行数据更新

<input type="text" v-model.number="text1"> {{text1}}
number方法：输入数字开头的话只保留数字，后面的字母不保留；字母开头，都保留

<input type="text" v-model.trim="text1"> {{text1}}
trim方法：去除首位的空格

过滤案例

<div id="app">
    请输入搜索内容：<input type="text" v-model="myType" @input="search">{{myType}}
    <ul>
        <li v-for="i in newDatelist">{{i}}</li>
         <!--循环展示关键词 -->
    </ul>
</div>



<script>
    var vm = new Vue({
        el: '#app',
        data: {
            myType: '',
            dateList: ['a', 'aa', 'vvs', 'asd', 'weq', 'sxc', 'asd', 'wqe', 'sadc', 'c', 'asd'],
          <!-- 关键词列表 -->
            newDatelist: ['a', 'aa', 'vvs', 'asd', 'weq', 'sxc', 'asd', 'wqe', 'sadc', 'c', 'asd'],
           <!-- 过滤后列表 -->
        },
        methods: {
            search() {
                this.newDatelist = this.dateList.filter(
               <!--数组自带方法.filter加匿名函数，结果为ture就保留，结果为false就过滤掉，然后赋予给新的列表展示到前端-->   
                    item =>  item.indexOf(this.myType) >= 0
                )}
            }})
</script>


思路:
1.对输入框输入值和变量进行双相绑定 时时接收输入框数据，并对输入框绑定input事件
2.只要输入框有输入则触发input事件
3.创建2个关键词列表数据相同，一个用来展示，一个用来过滤
4.对用于过滤的列表进行过滤方法，过滤方法内部会对每一个数据进行判断，是否和输入数据有相同的部分，有则保留，无则去除，保留后的值赋予给展示列表
5.这样前端就实现了时时输入 时时过滤

箭头函数

箭头函数主要作用：可以当该函数运用父级函数内的this，解决了函数套函数this指向问题

eg:

var vm = new Vue({
        el: '#app',
        data: {
            myType: '',
            dateList: ['a', 'aa', 'vvs', 'asd', 'weq', 'sxc', 'asd', 'wqe', 'sadc', 'c', 'asd'],
            newDatelist: ['a', 'aa', 'vvs', 'asd', 'weq', 'sxc', 'asd', 'wqe', 'sadc', 'c', 'asd'],
        },
        methods: {
            search() {
            # 创建函数
                this.newDatelist = this.dateList.filter(
                                   # 函数内部又创建了匿名函数
                    item =>  item.indexOf(this.myType) >= 0
                )}
            }
  
  
 item =>  item.indexOf(this.myType) >= 0
 # 参数  => 运行结果  
 # 由于使用了箭头函数，这里就可以直接使用this了，这里的this相当于父级里面的

事件修饰符

@click.stop="handleLi" 用于修饰事件

事件修饰符 释义
.stop 只处理自己的事件，子控件冒泡的事件不处理（阻止事件冒泡）
.self 只处理自己的事件，子控件冒泡的事件不处理
.prevent 阻止a链接的跳转
.once 事件只会触发一次（适用于抽奖页面） 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div>
    <div class="app">
        <h1>事件修饰符stop，子控件不再冒泡给父控件</h1>
        <ul @click='handleUl'>
            <li @click.stop="handleLi">第一</li>
            <li>第二</li>
        </ul>

        <h1>事件修饰符self:只处理自己的事件，子控件的冒泡，不处理</h1>
        <ul @click.self='handleUl'>
            <li @click="handleLi">第一</li>
            <li>第二</li>
        </ul>

        <h1>prevent阻止a的跳转</h1>
        <a href="http://www.baidu.com" @click.prevent="handleA">点我看美女</a>

        <h1>once 只响应一次</h1>
        <button @click.once="handleClick">点我抽奖</button>
    </div>

</div>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {},
        methods: {
            handleLi() {
                console.log('li被点击了')
            },
            handleUl() {
                console.log('ul被点击了')
            },
            handleA() {
                console.log('a标签被点了')
                // 阻止a的跳转，自己决定要不要跳
                // 手动指定跳
                location.href = 'http://www.cnblogs.com'

            },
            handleClick() {
                console.log('我被点了')
            }
        }

    })
</script>
</html>

按键修饰符

通过按键来触发函数的执行

<input type="text" v-model="test" @keyup.enter="handleKey1">   
# 通过enter键来触发handleKey1这个函数

<input type="text" v-model="test" @keyup="handleKey">  
# 任意按键触发函数

handleKey(event) {
  # 按键函数可以带参数，默认按键对象
     if (event.keyCode === 13) {}
}
  # 可以通过 event.keyCode来获取用户按键的 键数值
  # 可以通过 event.key来获取用户按的什么键

Input表单控制

    username:<input type="text" v-model="username">
    password:<input type="password" v-model="password">
    男:<input type="radio" v-model="gender" value="男">
    女:<input type="radio" v-model="gender" value="女">
    记住密码:<input type="checkbox" v-model="remember">
    <p>爱好：
        篮球<input type="checkbox" v-model="hobby" value="篮球">
        足球<input type="checkbox" v-model="hobby" value="足球">
        双色球<input type="checkbox" v-model="hobby" value="双色球">
    </p>

# input type="radio" 单选 需要设定一个值 双向绑定


<script>
    var vm = new Vue({
        el: '.app',
        data: {
            username: '',
            password: '',
            gender: '',  
          // radio单选，多个radio绑定同一个变量，选中某个，就对应value值
            remember: false, 
           // checkbox 单选是true或false
            hobby: []  
          // checkbox 多选是数组类型，必须一开始定义就是数组，多个checkbox绑定一个变量
        },
        methods: {
            handleClick() {
                console.log(this.username, this.password, this.gender, this.remember, this.hobby)
            }
        }
    })
</script>
posted @   Python-moon  阅读(151)  评论(0)  编辑  收藏  举报
相关博文：
· VUE简介/插值/属性/文本/函数指令/if/for操作
· 分支结构实战讲解
· vue03
· vue-3
· js的几种循环方式，key值的解释，数组，对象的检测与更新，input事件，v-model双向数据绑定，过滤案例，事件修饰符，按键修饰符，表单控制
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示