vue-3

js的几种循环方式

v-for可以循环的变量

可以循环的有数组，对象，字符串，数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="app">

    <h1>v-for可以循环什么</h1>
    <h2>循环数组</h2>
    <div v-for="item in l1">{{item}}</div>
    <h2>循环数组带索引</h2>
    <div v-for="(item,index) in l1">第{{index + 1}}个, 值是:{{item}}</div>

    <h2>循环对象，默认是value</h2>
    <div v-for="item in info">{{item}}</div>
    <h2>循环对象，带key和value</h2>
    <div v-for="(item,key) in info">key的值是: {{key}} 值是{{item}}</div>

    <h2>循环字符串</h2>
    <div v-for="item in s">
        <p v-if="item!=''">{{item}}</p>
        <br v-else>
    </div>
    <h2>循环字符串带索引</h2>
    <div v-for="(item, index) in s">
        <p v-if="item!=' '">{{item}}---索引{{index}} </p>
        <br v-else>
    </div>
    <h2>循环数字</h2>
    <div v-for="item in 8">{{item}}</div>
    <h2>循环数字加索引</h2>
    <div v-for="(item,index) in 8">{{item}} 索引{{index}}</div>

</div>


</body>
<script>
    var t = [4, 5, 6]
    var vm = new Vue({
        el: '#app',
        data: {
            l1:[1,2,3],
            info:{name:'jason',age: 19, t},
            s:'hello world'
        },
        

    })
</script>
</html>

js的循环方式

1. js 的循环基于索引的循环

python中没有基于索引的循环 python都是基于迭代的循环

var a = [4, 5, 6]
    for (i=0; i<a.length; i++) {
        console.log(a[i])
    }

2.js 的in 循环

拿到的是索引而vue 的v-for拿到的是值

var a = [4, 5, 6]
    for (i in a){
        console.log(i)
    }

3 ES6 语法 of 循环

var a = [4, 5, 6, 7]
    for (item of a){
        console.log(item)
    }

4.数组的方法，forEach可以循环

var a=[4, 5, 6, 7]
    a.forEach(function (item) {
        console.log(index)
        console.log(item)
    })

5.jq 的循环循环数组对象

记得导jQuery的cdn 或者本地文件

 var a = [4, 5, 6, 7]
    $.each(a, function (index, item) {
        console.log(index)
        console.log(item)
    })

key值的解释

vue的v-for写在标签上，在标签上加一个key，用属性指令绑定一个变量，key的值每次都不一样，这样可以加速虚拟dom的替换，从而提高循环效率，key值必须唯一

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

数组，对象的检测与更新

vue对象新增一个key-value，发现页面没有变化以后用 Vue.set(this.info, 'hobby', '篮球') 设置一下即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="app">
    <h1>循环对象</h1>
    <div v-for="(value, key) in info">
        <h3>key值是 {{key}}</h3>
        <h3>value值是 {{value}}</h3>
        <hr>
    </div>
    <button @click="handleAdd">点击数据</button>
</div>

</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            info:{name:'jason',age: 19},
        },
        methods:{
            handleAdd(){
                // 页面不会变化 但是值有了
                // this.info['hobby'] = '篮球'
                // 页面有变化
                // this.info['name'] = '张红'

                //遇到数据变了 页面没有变的情况 都使用
                Vue.set(this.info,'hobby', '篮球')
            }
        }
    })
</script>
</html>

input事件

# input的事件：
click 点击事件
input 当输入框进行输入的时候 触发事件
change 当元素的值发生改变时 触发事件
blur 当输入框失去焦点的时候 触发的事件
focus 当获得焦点 触发事件

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="app">

    <h1>点击事件click</h1>
    <input type="text" @click="handleClick">
    <h1>失去焦点blur</h1>
    <input type="text" @blur="handleBlur">
    <h1>只要输入，就会触发 input事件</h1>
    <input type="text" @input="handleInput">
    <h1>数据发生改变，就会触发 change事件</h1>
    <input type="text" @change="handleChange">
    <h1>获得了焦点 就会触发 focus事件</h1>
    <input type="text" @focus="handleFocus">

</div>


</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
        },
        methods:{
            handleClick(){
                alert('被点了')
            },
            handleBlur(){
                console.log('失去焦点了')
            },
            handleInput(){
                console.log('输入进去了')
            },
            handleChange(){
                console.log('改变了')
            },
            handleFocus(){
                console.log('获得焦点了')
            }
        }


    })
</script>
</html>

v-model双向数据绑定

input框可以输入值，输入以后，就被js变量拿到，如果使用 :value='变量'这种形式，页面中输入框的变化，但变量不会改变，所以使用v-model做双向数据绑定

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="app">
    <h1>单向数据绑定</h1>
    <input type="text" :value="name">----->{{name}}---->单项数据绑定
    <h1>双向数据绑定</h1>
    <input type="text" v-model="age">----->{{age}}--->双向数据绑定
</div>

</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name:'jason',
            age: 18
        },
        methods:{
        }
    })
</script>
</html>

过滤案例（箭头函数）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="app">
    <h1>过滤案例</h1>
    <p>请输入想要搜索的内容: <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: '#app',
        data: {
            myText: '',
            dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
            newDataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
        },
        methods: {
            handleInput() {
                  // this.newDataList = this.dataList.filter(item => {
                //     // this 指向问题
                //     // if (_this.myText.indexOf(item) >= 0) {    // 判断输入的值myText是否在item中
                //     // if (item.indexOf(_this.myText) >= 0) {
                //     //     return true
                //     // } else {
                //     //     return false
                //     // }
                //     //上面5行，简写成
                //     return item.indexOf(this.myText) >= 0
                // })
                this.newDataList = this.dataList.filter(
                    item => item.indexOf(this.myText) >= 0
                )
            }
        }
    })
</script>
</html>

补充：

1.数组的过滤方法

 var dataList = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
 var newDataList = dataList.filter(function (item) {
      return false  // return true表示这个值保留,false 表示这个值不要
 })
 console.log(newDataList)

2.字符串的indexOf方法

 补充2 ：字符串的indexOf方法，判断子字符串是否在当前字符串中,如果在返回的是索引，如果不在返回-1
 var s = 'lqz is handsome'
 var s1 = 'qqq'
  var i = s.indexOf(s1)
  console.log(i)

3.ES6的箭头写法

 补充3 ：es6 的箭头函数写法---》函数中套函数，this指向有问题，有了箭头函数，箭头函数没有自己的this，用的都是上一级的this

    1 无参数，无返回值箭头函数
     var f = () => {
         console.log('函数')
 		 }
     2 有一个参数，没有返回值的箭头函数  括号可以去掉,可以加
     var f = item => {
         console.log(item)
     }
     3 有多个参数，没有返回值的箭头函数  括号不能去掉
     var f = (item, key) => {
         console.log(item)
     }

     4 有一个参数，一个返回值
     var f =  (item)=> {
         return item + 'lqz'
     }

     var f = item => {
         return item + 'lqz'
     }

    var f = item => item + 'lqz'

    var res = f('lqz')
    console.log(res)

事件修饰符

事件修饰符	释义
.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 class="app">

    <h1>事件修饰符stop，子控件不再冒泡给父控件</h1>
    <ul @click="handleUl">
        <li @click.stop="handleLi">第一</li>
        <li>第二</li>
    </ul>

    <h1>prevent阻止a的跳转</h1>
    <a href="http://www.4399.com" @click.prevent="handleA"></a>

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


</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>

按键修饰符

# 按键事件：按了键盘某个键，就会触发函数的执行
@keyup="handleKeyUp"

# 按键修饰符：只有某个按键被按下才触发
@keyup.enter
@keyup.13

<!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">
        <!--        <input type="text" v-model="text" @keyup="handleKeyUp">-&ndash;&gt;{{text}}-->
        <!--        <input type="text" v-model="text" @keyup.13="handleKeyUp2">-&ndash;&gt;{{text}}-->
        <input type="text" v-model="text" @keyup.enter="handleKeyUp2(1,$event)">--->{{text}}
    </div>

</div>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            text: ''
        },
        methods: {
            handleKeyUp(event) {
                // console.log('按键被按下了')
                // keyCode 对照表https://blog.csdn.net/zqian1994/article/details/109486445
                // console.log('按钮被按下了：', event.key, event.keyCode)
                if (event.keyCode == 13) {
                    console.log('开始跟后端交换搜索了')
                }
            },
            handleKeyUp2(a, event) {
                console.log(event)
                console.log('enter被按了')
            }

        }

    })
</script>
</html>

表单控制

<!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">

        <p>用户名：<input type="text" v-model="username"></p>
        <p>密码：<input type="password" v-model="password"></p>
        <p>性别：
            男：<input type="radio" v-model="gender" value="1">
            女：<input type="radio" v-model="gender" value="2">
        </p>
        <p>记住密码：<input type="checkbox" v-model="remember"></p>

        <p>爱好：
            篮球：<input type="checkbox" v-model="hobby" value="篮球">
            足球：<input type="checkbox" v-model="hobby" value="足球">
            排球：<input type="checkbox" v-model="hobby" value="排球">
        </p>

        <button @click="handleClick">登录</button>

    </div>

</div>
</body>
<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>
</html>

posted @ 2023-02-15 21:45 hugmi男孩阅读(11) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· vue-2 插值语法

· vue-4

· vue_day03

· vue基本操作

· js的几种循环方式，key值的解释，数组，对象的检测与更新，input事件，v-model双向数据绑定，过滤案例，事件修饰符，按键修饰符，表单控制

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）

公告

昵称： hugmi男孩
园龄： 2年5个月
粉丝： 10
关注： 16

+加关注

2025年3月

日

一

二

三

四

五

六

zjl248

vue-3

js的几种循环方式

v-for可以循环的变量

js的循环方式

1. js 的循环基于索引的循环

2.js 的in 循环

3 ES6 语法 of 循环

4.数组的方法，forEach可以循环

5.jq 的循环循环数组对象

key值的解释

数组，对象的检测与更新

input事件

v-model双向数据绑定

过滤案例（箭头函数）

补充：

事件修饰符

按键修饰符

表单控制

公告

搜索

常用链接

随笔档案

阅读排行榜

zjl248

vue-3

js的几种循环方式

v-for可以循环的变量

js的循环方式

1. js 的循环 基于索引的循环

2.js 的in 循环

3 ES6 语法 of 循环

4.数组的方法，forEach可以循环

5.jq 的循环 循环数组 对象

key值的解释

数组，对象的检测与更新

input事件

v-model双向数据绑定

过滤案例（箭头函数）

补充：

事件修饰符

按键修饰符

表单控制

公告

搜索

常用链接

随笔档案

阅读排行榜

1. js 的循环基于索引的循环

5.jq 的循环循环数组对象