vue学习4

最新推荐文章于 2024-05-29 17:10:32 发布

像风Wind

最新推荐文章于 2024-05-29 17:10:32 发布

阅读量56

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_45725487/article/details/116498796

版权

图片切换：

点击箭头切换图片，原理：列表数据使用数组保存，

代码：

 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片切换</title>
</head>
<body>
  
    <div class="center"  >
        <!--图片-->
        <div id="mask">
            <img :src="imgArr[index]" alt="风景" />
            <!--letf-->
            <a @click="prev">
                <img src="新建文件夹/QQ图片20210507164923.png" alt="--letf--" />
            </a>
            <!--right-->
            <a @click="next">
                <img src="新建文件夹/QQ图片20210507164929.png" alt="--right--">
            </a>
            
        </div>

    </div>
   
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue(
        {
            el:"#mask",
            data:{
                imgArr:[
                    "新建文件夹/1.png",
                    "新建文件夹/2.png",
                    "新建文件夹/3.png",
                    "新建文件夹/4.png",
                    "新建文件夹/5.png",
                ],
                index:0

            },
            methods:{
                prev:function(){
                    this.index--;
                },
                next:function(){
                    this.index++;
                }, 
            }
        }
    )
    
</script>
</html>

v-for:

根据数据生成列表结构，可响应式，语法是（item，index）in 数据

数组长度会更新到界面，响应式：

代码：

<body>
  
    <div id="mask">
        <ul>
            <li v-for="(canting,index) in arr">
               {{index+1}} 山东理工大学餐厅:{{ canting }}
            </li>
        </ul>

    </div>
   
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue
    ({
        el:"#mask",
        data:
        { 
            arr:["第一餐厅","第二餐厅","第三餐厅","第四餐厅"]
        }
    })
       
    
</script>
</html>