vue基础3

于 2021-04-23 20:07:07 发布
阅读量273 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： vue基础 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/enginebrkalsy/article/details/116064228
这篇博客主要复习了Vue2中的v-for语句，详细讲解了如何遍历对象和数组，包括val-key形式、添加索引以及如何在data中动态添加数据。还探讨了v-for状态保持和各种数组操作，如Vue.set、push、unshift、pop、shift以及splice方法的使用。此外，还涉及到了对象的修改和阻止默认行为等实际应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vue2复习

在这里插入图片描述
在这里插入图片描述

v-for语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- in 后面可以跟普通数组、对象数组、对象、数字 -->
        <!-- 使用v-for去迭代数字，从1开始，python当中从0开始 -->
        <p v-for="count in 10">这是第{{count}}</p>

    </div>
    <script>
        new Vue({
            el:'#app',
            data:{}
        })
    </script>
</body>
</html>

在这里插入图片描述

遍历对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- in 后面可以跟普通数组、对象数组、对象、数字 -->
        <!-- 使用v-for去迭代数字，从1开始，python当中从0开始 -->
        <!-- <p v-for="count in 10">这是第{{count}}次循环</p> -->
        <p v-for='info in user'>{{info}}</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                user:{
                    id:1,
                    name:'holy',
                    gender:"男"
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

val，key形式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- in 后面可以跟普通数组、对象数组、对象、数字 -->
        <!-- 使用v-for去迭代数字，从1开始，python当中从0开始 -->
        <!-- <p v-for="count in 10">这是第{{count}}次循环</p> -->
        <!-- 遍历对象 直接遍历值 -->
        <p v-for='val,key in user'>值：{{val}}，键是{{key}}</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                user:{
                    id:1,
                    name:'holy',
                    gender:"男"
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

添加索引

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- in 后面可以跟普通数组、对象数组、对象、数字 -->
        <!-- 使用v-for去迭代数字，从1开始，python当中从0开始 -->
        <!-- <p v-for="count in 10">这是第{{count}}次循环</p> -->
        <!-- 遍历对象 直接遍历值 如果获取值和键，是值和键-->
        <p v-for='val,key,i in user'>值：{{val}}，键是{{key}},索引是{{i}}</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                user:{
                    id:1,
                    name:'holy',
                    gender:"男"
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

遍历数组

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

案例

在这里插入图片描述

在这里插入图片描述

引入样式

在这里插入图片描述
在这里插入图片描述

选择样式复制

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
    <div id="app">
        <!-- in 后面可以跟普通数组、对象数组、对象、数字 -->
        <!-- 使用v-for去迭代数字，从1开始，python当中从0开始 -->
        <!-- <p v-for="count in 10">这是第{{count}}次循环</p> -->
        <!-- 遍历对象 直接遍历值 如果获取值和键，是值和键 索引默认0开始-->
        <!-- <p v-for='val,key,i in user'>值：{{val}}，键是{{key}},索引是{{i}}</p> -->
        <!-- 遍历数组 -->
        <!-- <p v-for='user in li'>{{user.name}}</p> -->
        <table class="table table-bordered">
            <tr>
                <td>#</td>
                <td>name</td>
                <td>hobby</td>
            </tr>
            <tr>
                <td>1</td>
                <td>xi</td>
                <td>python</td>
            </tr>
            <tr>
                <td>2</td>
                <td>ab</td>
                <td>play</td>
            </tr>
            <tr>
                <td>3</td>
                <td>ha</td>
                <td>java</td>
            </tr>
        </table>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                user:{
                    id:1,
                    name:'holy',
                    gender:"男"
                },
                li:[
                    {id:1,name:'sun'},
                    {id:2,name:'rain'},
                    {id:3,name:'cloudy'},
                ]
            }
        })
    </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

for循环实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
    <div id="app">
        <!-- in 后面可以跟普通数组、对象数组、对象、数字 -->
        <!-- 使用v-for去迭代数字，从1开始，python当中从0开始 -->
        <!-- <p v-for="count in 10">这是第{{count}}次循环</p> -->
        <!-- 遍历对象 直接遍历值 如果获取值和键，是值和键 索引默认0开始-->
        <!-- <p v-for='val,key,i in user'>值：{{val}}，键是{{key}},索引是{{i}}</p> -->
        <!-- 遍历数组 -->
        <!-- <p v-for='user in li'>{{user.name}}</p> -->
        <table class="table table-bordered">
            <!-- 表头不能动 -->
            <th>
                <td>name</td>
                <td>hobby</td>
            </th>
            <tr v-for="info in li_2">
                <td>{{info.id}}</td>
                <td>{{info.name}}</td>
                <td>{{info.hobby}}</td>
            </tr>
        </table>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                user:{
                    id:1,
                    name:'holy',
                    gender:"男"
                },
                li:[
                    {id:1,name:'sun'},
                    {id:2,name:'rain'},
                    {id:3,name:'cloudy'},
                    
                ],
                li_2:[
                    {id:1,name:'sun',hobby:'python'},
                    {id:2,name:'rain',hobby:'java'},
                    {id:3,name:'cloudy',hobby:'play'}
                ]

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

在这里插入图片描述

直接在data后面加数据不用改for循环也可以显示

在这里插入图片描述

在这里插入图片描述

v-for状态保持

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
    <div id="app">
        <div v-for='book in books'>
            <span>{{book}}</span>
        </div>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                books:["python数据分析",'python核心编程']
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

使输入框显示书本名字——v-bind

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
    <div id="app">
        <div v-for='book in books'>
            <span>{{book}}</span>
            <input type="text" v-bind:placeholder='book'>
        </div>
        <button @click='ChangeBooks'>
            点击排序
        </button>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                books:["python数据分析",'python核心编程','西瓜书']
            },
            methods:{
                ChangeBooks(){
                    // key排序规则——方法
                    this.books.sort(function(a,b){
                        console.log(a,b)
                    })
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

使其随机排序 Math.random（）

在这里插入图片描述

取整数——parseInt

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
    <div id="app">
        <!-- 注意：key指定的值必须为字符串或者整数，不能是数组和对象 -->
        <div v-for='book in books' v-bind:key='book'>
            <span>{{book}}</span>
            <input type="text" v-bind:placeholder='book'>
        </div>
        <button @click='ChangeBooks'>
            点击排序
        </button>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                books:["python",'java','c']
            },
            methods:{
                ChangeBooks(){
                    // key排序规则——方法
                    this.books.sort(function(a,b){
                        // 两两传入进行比较
                        // console.log(a,b)
                        // 随机排序0-1
                        // 转为整数
                        return 4-parseInt(Math.random()*10)
                    })
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

修改数组修改数组元素——Vue.set(数组，下标，新数据)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
    <div id="app">
        
        <div v-for='book in books' v-bind:key='book'>
            <span>{{book}}</span>
        </div>
        <button @click='updateList'>更新数组</button>
      
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                books:["python",'java','c']
            },
            methods:{
                updateList:function(){
                    // 将python修改为php 首先获取索引
                    // console.log(this.books[0])
                    // 修改数组元素——Vue.set(数组，下标，新数据)
                    Vue.set(this.books,0,'PHP')
                }
            }
                
        })
    </script>
</body>
</html>

在这里插入图片描述

往数组尾部添加数据——数组.push（）

在这里插入图片描述

在这里插入图片描述

往数组头部添加数据——数组.unshift()

在这里插入图片描述

在这里插入图片描述

往数组尾部删除数据——数组.pop()

在这里插入图片描述

在这里插入图片描述

往数组尾部删除数据——数组.shift()

在这里插入图片描述

在这里插入图片描述

数组添加 修改 删除都可以——splice（）

增加：

在这里插入图片描述

在这里插入图片描述

替换和增加：

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

删除：——当下标为-1时为最后一个元素

在这里插入图片描述

在这里插入图片描述

改变对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
    <div id="app">
        
        <div v-for='book in books' v-bind:key='book'>
            <span>{{book}}</span>
        </div>
        <button @click='updateList'>更新数组</button>
        <ul>
            <li v-for='info in user'>{{info}}</li>
        </ul>
        <button @click='updateObject'>更新对象</button>
      
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                books:["python",'java','c'],
                user:{
                    'name':'engine'
                }
            },
            methods:{
                updateList:function(){
                    // 将python修改为php 首先获取索引
                    // console.log(this.books[0])
                    // 修改数组元素——Vue.set(数组，下标，新数据)
                    // Vue.set(this.books,0,'PHP')

                    // 往数组尾部添加数据
                    // this.books.push('GO')
                    // 往数组头部添加数据
                    // this.books.unshift('c++')
                    // 从数组末尾开始删除
                    // this.books.pop()
                    // 从数组头部开始删
                    // this.books.shift()
                    // splice -添加 删除 修改都可以 splice
                    // this.books.splice(起始位置，选中几个元素，值)
                    // 从下标为0开始，0个元素，就是添加
                    // this.books.splice(0,0,'R')
                    // 替换
                    // this.books.splice(0,1,'GO','php')
                    // 将两个元素都替换成Go 选中元素变为2
                    // this.books.splice(0,2,'GO','Go')
                    // 删除
                    // this.books.splice(0,1)


                },
                updateObject:function(){
                    // 将engine改为han
                    // this.user.name='han'
                    // 添加属性 同数组
                    Vue.set(this.user,'age','18')
                    
                }
            }
                
        })
    </script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

event参数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <button name='btn' @click='sub(3)'>单击</button>

        <a href="https://www.baidu.com/">百度一下</a>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
               
            },
            methods:{
                sub:function(value){
                    console.log(value)
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <button name='btn' @click='sub(3,$event)'>单击</button>

        <a href="https://www.baidu.com/">百度一下</a>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
               
            },
            methods:{
                sub:function(value){
                    // value是形参，调用时传入的参数
                    console.log(value)
                    // 想要获取原生DOM元素属性
                    console.log(event)
                }
            }
        })
    </script>
</body>

在这里插入图片描述
在这里插入图片描述

快速获取name原生态DOM属性：

在这里插入图片描述
在这里插入图片描述

阻止默认跳转并重定向

在这里插入图片描述

在这里插入图片描述

简易计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="box">
        <input type="text">
        <!-- +-*/下拉框 -->
        <select name="" id="">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text">
        <input type="button" value='='>
        <input type="text">
    </div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="box">
        <!-- 
            1.输入v1 v2 option 结果result
            2.点击等号按钮运算
         -->
        <input type="text" v-model:value='v1'>
        <!-- +-*/下拉框 -->
        <select name="" id="" v-model:value='opt'>
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model:value='v2'>
        <input type="button" value='=' @click='calcu'>
        <input type="text" v-model:value='result'>
    </div>
    <script>
        new Vue({
            el:'#box',
            data:{
                v1:0,
                v2:0,
                opt:'+',
                result:0
            },
            methods:{
                calcu:function(){
                    switch(this.opt){
                        case'+':
                        // 加法运算 将字符串转为int
                        this.result =parseInt(this.v1) +parseInt(this.v2)
                        break
                        case'-':
                        // 减法
                        this.result =parseInt(this.v1) - parseInt(this.v2)
                        break
                        case'*':
                        // 乘法运算 
                        this.result =parseInt(this.v1) * parseInt(this.v2)
                        break
                        case'/':
                        // 除法运算 
                        this.result =parseInt(this.v1) / parseInt(this.v2)
                        break
                    }
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

用eval简洁代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="box">
        <!-- 
            1.输入v1 v2 option 结果result
            2.点击等号按钮运算
         -->
        <input type="text" v-model:value='v1'>
        <!-- +-*/下拉框 -->
        <select name="" id="" v-model:value='opt'>
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model:value='v2'>
        <input type="button" value='=' @click='calcu'>
        <input type="text" v-model:value='result'>
    </div>
    <script>
        new Vue({
            el:'#box',
            data:{
                v1:0,
                v2:0,
                opt:'+',
                result:0
            },
            methods:{
                calcu:function(){
                    var codeStr =parseInt(this.v1) +this.opt +parseInt(this.v2)
                    this.result = eval(codeStr)
                    
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值