Vue作业

boy快快长大

已于 2023-04-14 16:45:24 修改

阅读量541

点赞数

分类专栏：前端文章标签： vue.js 前端 javascript

于 2023-01-09 15:25:54 首次发布

本文链接：https://blog.csdn.net/Blue_Pepsi_Cola/article/details/128611124

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

文章目录

作业1
作业2
作业3
作业4

作业1

作业：需要用data保存：商品名、单价、数量，然后显示到页面上，点击按钮可以变更数量，最小值1，减按钮不可用，最大值20，隐藏+按钮
总价格应该是单价*数量，计算得到。
在这里插入图片描述

<!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/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- {{}} :插值语法, 用于向 双标签内容中 书写JS代码 -->
        <div>商品名: {{gName}}</div>
        <div>单价: ¥{{price}}</div>
        <div>
            数量:
            <!-- Vue框架的核心竞争力: 改动数据时, 与此数据有关系的DOM元素 都会被自动更新! -->
            <!-- :属性名="js代码" -->
            <button @click="changeCount(-1)" :disabled="count==1">-</button>
            <span>{{count}}</span>
            <!-- v-show: true显示/false隐藏;  本质是利用 css 的display:none 实现隐藏 -->
            <button @click="changeCount(+1)" v-show="count<20">+</button>
        </div>
        <div>总价格: ¥{{price * count}}</div>
    </div>

    <script>
        // 创建vue对象, 管理 id='app' 的元素
        new Vue({
            el: "#app", // #app是 id选择器的写法
            data: {
                gName: "iPhone14",
                price: 8999,
                count: 5,
            },
            methods: {
                // 关于事件参数: 如果要使用, 再写.
                changeCount(delta) {
                    this.count += delta
                },
            },
        })
    </script>
</body>

</html>

作业2

在这里插入图片描述

<!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/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- table[border=1]>(thead>tr>td*5)+(tbody>tr>td*5) -->
        <table border="1">
            <thead>
                <tr>
                    <td>序号</td>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>手机号</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in teachers">
                    <!-- 序号本身从0开始, 显示时 +1 才能从1开始显示 -->
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.age}}</td>
                    <td>{{item.phone}}</td>
                    <td>
                        <!-- 由于按钮是循环生成的, 所以其中的index变量, 在生成时会替换成实际的值, 例如 0 1 2 3... -->
                        <button :data-i="index" @click="removeTeacher(index)">
                            删除
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                teachers: [
                    { name: "亮亮", age: 34, phone: "18787878789" },
                    { name: "亚楠", age: 18, phone: "18787875555" },
                    { name: "小新", age: 32, phone: "18787434897" },
                    { name: "铭铭", age: 35, phone: "18783447897" },
                    { name: "贾", age: 37, phone: "18787545697" },
                ],
            },
            methods: {
                // 删除指定序号的 元素
                removeTeacher(index) {
                    // 数组的万能方法 splice
                    // 数组.splice(i, n, e):  从序号i位置 删除n个元素, 然后把e行元素加入i位置
                    this.teachers.splice(index, 1)
                },
            },
        })
    </script>
</body>

</html>

作业3

在这里插入图片描述
显示图片，当当前项的序号和当前图片的序号相同时不可用

<!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>
  </head>
  <body>
    <div id="app">
      <!-- :scr="JS代码" -->
      <!-- 模板字符串:  `${js代码}` -->
      <img :src="`./img/${images[cur]}`" alt="" />
      <div>
        <!-- 写法1: 直接遍历图片数组, 用 序号+1 作为按钮名 -->
        <!-- 写法2: 遍历图片数组的长度, vue支持遍历数字 -->
        <!-- index: 序号, 从0开始;  item: 值, 从1开始 -->
        <!-- 点击事件: 事件发生时会触发 "" 中的代码 -->
        <!-- 当前项的序号 和 当前图片的序号 相同时, 不可用 -->
        <button
          @click="cur=index"
          v-for="(item,index) in images.length"
          :disabled="cur==index"
          :data-i="index"
        >
          {{item}}
        </button>
      </div>
    </div>

    <script src="./vendor/vue.js"></script>
    <script>
      new Vue({
        el: "#app",
        data: {
          images: ["1.jpg", "2.jpg", "3.jpg", "4.jpg"],
          cur: 0, //当前序号
        },
      })
    </script>
  </body>
</html>

作业4

<!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/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- v-if: 实现隐藏的原理: 移除DOM元素.  性能消耗大, 推荐v-show -->
        <div v-if="isLogin">
            <span>欢迎,小新</span>| <button @click="isLogin=false">退出</button>
        </div>

        <div v-else>
            <button @click="isLogin=true">登录</button>|<button>注册</button>
        </div>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: { isLogin: false }, //代表登录状态
        })
    </script>
</body>

</html>

boy快快长大

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue作业

作业：需要用data保存：商品名、单价、数量，然后显示到页面上，点击按钮可以变更数量，最小值1，减按钮不可用，最大值20，隐藏+按钮。// 数组.splice(i, n, e): 从序号i位置删除n个元素, 然后把e行元素加入i位置。显示图片，当当前项的序号和当前图片的序号相同时不可用。// 创建vue对象, 管理 id='app' 的元素。// 关于事件参数: 如果要使用, 再写.// #app是 id选择器的写法。// 数组的万能方法 splice。// 删除指定序号的元素。
复制链接

扫一扫