vue基础3

最新推荐文章于 2024-09-18 09:53:11 发布

brkalsy

最新推荐文章于 2024-09-18 09:53:11 发布

阅读量247

点赞数

分类专栏： vue基础文章标签： vue javascript

本文链接：https://blog.csdn.net/enginebrkalsy/article/details/116064228

版权

这篇博客主要复习了Vue2中的v-for语句，详细讲解了如何遍历对象和数组，包括val-key形式、添加索引以及如何在data中动态添加数据。还探讨了v-for状态保持和各种数组操作，如Vue.set、push、unshift、pop、shift以及splice方法的使用。此外，还涉及到了对象的修改和阻止默认行为等实际应用。

摘要由CSDN通过智能技术生成

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

最低0.47元/天解锁文章