Vue练习题一

最新推荐文章于 2024-06-05 20:43:04 发布
最新推荐文章于 2024-06-05 20:43:04 发布
阅读量536 收藏 11
点赞数 9
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/into1yyds/article/details/134499101
版权

Vue练习题一

1.翻转世界

目标: 点击按钮 - 把文字取反显示 - 再点击取反显示(回来了)

提示: 把字符串取反赋予回去

效果演示:
Alt

总结: 记住方法特点, 多做需求, vue是数据变化视图自动更新, 减少操作DOM时间, 提高开发效率

代码实现：


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <h1>{{msg}}</h1>
        <button @click="btn">逆转世界</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <script>
        const box = new Vue({
            el: '.box',
            data: {
                msg: 'Hello,World'
            },
            methods: {
                btn() {
                    /* split(''),单引号不传参数默认将字符串拆分成一个个字符数组。
                    reverse() 将数组的字符串进行一个倒序反转。【注】： reverse() 方法只对数组起作用。
                    join('*')按指定字符将数组分割成字符串 */
                    const str1 = this.msg.split('').reverse().join('');
                    this.msg = str1;
                }
            }
        })
    </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>
  <style>
    body {
      background-color: #ccc;
    }

    #app {
      width: 400px;
      margin: 20px auto;
      background-color: #fff;
      border: 4px solid blueviolet;
      border-radius: 1em;
      box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
      padding: 1em 2em 2em;
    }

    #app h3 {
      text-align: center;
    }

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid #ccc;
      padding: 0 1em;
    }

    .title h4 {
      line-height: 2;
      margin: 0;
    }

    .container {
      border: 1px solid #ccc;
      padding: 0 1em;
    }

    .btn {
      /* 鼠标改成手的形状 */
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div id="app">
    <h3>案例：折叠面板</h3>
    <div>
      <div class="title">
        <h4>芙蓉楼送辛渐</h4>
        <span class="btn">
          收起
        </span>
      </div>
      <div class="container">
        <p>寒雨连江夜入吴,</p>
        <p>平明送客楚山孤。</p>
        <p>洛阳亲友如相问，</p>
        <p>一片冰心在玉壶。</p>
      </div>
    </div>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app'
    })
  </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>折叠面板</title>
    <style>
        body {
            background-color: #ccc;
        }

        #app {
            width: 400px;
            margin: 20px auto;
            background-color: #fff;
            border: 4px solid blueviolet;
            border-radius: 1em;
            box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
            padding: 1em 2em 2em;
        }

        #app h3 {
            text-align: center;
        }

        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid #ccc;
            padding: 0 1em;
        }

        .title h4 {
            line-height: 2;
            margin: 0;
        }

        .container {
            border: 1px solid #ccc;
            padding: 0 1em;
        }

        .btn {
            /* 鼠标改成手的形状 */
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="app">
        <h3>案例：折叠面板</h3>
        <div>
            <div class="title">
                <h4>芙蓉楼送辛渐</h4>
                <span class="btn" @click="fn" v-text="inShow === true?'收起':'展开'"></span>
            </div>
            <div class="container" v-show="inShow">
                <p>寒雨连江夜入吴,</p>
                <p>平明送客楚山孤。</p>
                <p>洛阳亲友如相问，</p>
                <p>一片冰心在玉壶。</p>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                inShow: true
            },
            methods: {
                fn() {
                    this.inShow = !this.inShow;
                }
            }
        })
    </script>

</body>

</html>

附加练习

1.帅哥美女走一走

目标: 点击按钮, 改变3个li的顺序, 在头上的就到末尾.

提示: 操作数组里的顺序, v-for就会重新渲染li

在这里插入图片描述
代码实现：

<!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 id="app">
        <ul>
            <li v-for="item in list" :key="item">{{item}}</li>
        </ul>
        <button @click="fn">走一走</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                list: ['帅哥', '美女', '程序猿']
            },
            methods: {
                fn() {
                    // 在数组末尾添加新元素
                    this.list.push(this.list[0]);
                    // 删除数组第一个元素
                    this.list.shift();
                    // this.list.push();this.list.shift();返回的都是数组长度
                }
            }
        })
    </script>
</body>

</html>

2.加加减减

目标: 点击生成按钮, 新增一个li(20以内的随机数字)和删除按钮, 点击删除按钮, 删除对应的li和值

提示: 数组渲染列表, 生成和删除都围绕数组操作

在这里插入图片描述
代码实现：

<!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 id="app">
        <ul>
            <li v-for="item in list" :key="item.id">
                {{item.number}}
                <button @click="del(item.id)">删除</button>
            </li>
        </ul>
        <button @click="add">生成</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                list: []
            },
            methods: {
                del(id) {
                    this.list = this.list.filter(item => item.id != id);
                },
                add() {
                    this.list.push({
                        id: +new Date,
                        number:
                            Math.floor(Math.random() * (20 - 0 + 1)) + 0
                    })
                }
            }
        })
    </script>
</body>

</html>

3.购物车

目标: 完成商品浏览和删除功能, 当无数据给用户提示

  • 需求1: 根据给的初始数据, 把购物车页面铺设出来
  • 需求2: 点击对应删除按钮, 删除对应数据
  • 需求3: 当数据没有了, 显示一条提示消息

在这里插入图片描述

基础代码：
html+css和数据代码结构(可复制接着写)

<!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>
  <style>
    #app {
      width: 600px;
      margin: 10px auto;
    }

    .tb {
      border-collapse: collapse;
      width: 100%;
    }

    .tb th {
      background-color: #0094ff;
      color: white;
    }

    .tb td,
    .tb th {
      padding: 5px;
      border: 1px solid black;
      text-align: center;
    }

    .add {
      padding: 5px;
      border: 1px solid black;
      margin-bottom: 10px;
    }
  </style>
</head>

<body>
  <div id="app">
    <table class="tb">
      <tr>
        <th>编号</th>
        <th>品牌名称</th>
        <th>创立时间</th>
        <th>操作</th>
      </tr>
      <!-- 循环渲染的元素tr -->
      <tr>
        <td>1</td>
        <td>车名</td>
        <td>2020-08-09</td>
        <td>
          <button>删除</button>
        </td>
      </tr>
      <tr>
        <td colspan="4">没有数据咯~</td>
      </tr>
    </table>
  </div>
  <script src="./vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        list: [
          { id: 1, name: "奔驰", time: "2020-08-01" },
          { id: 2, name: "宝马", time: "2020-08-02" },
          { id: 3, name: "奥迪", time: "2020-08-03" },
        ]
      }
    })
  </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>购物车</title>
    <style>
        #app {
            width: 600px;
            margin: 10px auto;
        }

        .tb {
            border-collapse: collapse;
            width: 100%;
        }

        .tb th {
            background-color: #0094ff;
            color: white;
        }

        .tb td,
        .tb th {
            padding: 5px;
            border: 1px solid black;
            text-align: center;
        }

        .add {
            padding: 5px;
            border: 1px solid black;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div id="app">
        <table class="tb">
            <tr>
                <th>编号</th>
                <th>品牌名称</th>
                <th>创立时间</th>
                <th>操作</th>
            </tr>
            <!-- 循环渲染的元素tr -->
            <tr v-for="item in list" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.time}}</td>
                <td>
                    <button @click="del(item.id)">删除</button>
                </td>
            </tr>
            <tr v-show="list.length === 0">
                <td colspan="4">没有数据咯~</td>
            </tr>
        </table>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                list: [
                    { id: 1, name: "奔驰", time: "2020-08-01" },
                    { id: 2, name: "宝马", time: "2020-08-02" },
                    { id: 3, name: "奥迪", time: "2020-08-03" },
                ]
            },
            methods: {
                del(id) {
                    this.list = this.list.filter(item => item.id != id);
                }
            }
        })
    </script>

</body>

</html>
木木云1
关注
  • 9
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue双花括号的使用方法 附练习题
08-28
在本文中，我们将详细介绍 Vue 双花括号的使用方法，并提供了实际的代码示例和练习题，帮助读者更好地理解和掌握该技术。 一、 Vue 双花括号的基本使用 Vue 双花括号的基本语法是使用双大括号 `{{ }}` 将数据插入...
vue基础语法练习源码
12-09
Vue.js 是一款流行的前端JavaScript框架，它以组件化开发、易用性和高性能著称。在这个名为"vue基础语法练习源码"的资源中，我们将会探索一些Vue的基础概念和语法，包括HTML文件中的Vue应用实践，如过滤器、自定义...
Vue基础学习 —— Day1练习
Yyan7777的博客
02-29 449
本文为自学B站黑马程序员Vue课程的练习，自用
Vue专项练习
qq_44665456的博客
04-24 4554
1、以下不是vue 内置指令的是（） v-html v- on v- for v-hidden 答：选D .== v-html 指令：让标签内用 html 渲染== , v-on 指令： 绑定事件，v- for 指令： 循环，v-hidden 没有 vue 中的 隐藏是 v-if 和 v-show 2、关于 Vuex 的说法错误的是 可以使用 this.$store.state 获取 Vuex 中的存储状态 getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新金酸
vue课后习题及答案
最新发布
m0_73490019的博客
06-05 3699
1.Vue是一套用于构建___用户界面_____的渐进式框架.2.Vue中的指令以______v-__开头.3.Node.js 是一个基于____V8___引擎的JavaScript运行环境。4.在yam 中，__yarn add__命令用于添加指定名称的包。5.在 npm 中，_________命令用于卸载指定名称的包。
Vue面试题：30道含答案和代码示例的练习题
三拾的博客
05-05 1587
这里使用v-model指令将用户输入的内容绑定到Vue实例的message属性上，然后使用v-on指令监听键盘输入事件，当用户按下“Enter”键时调用Vue实例的sendMessage方法。v-model指令会在表单元素上创建一个监听器，在用户输入时实时更新Vue实例的数据，并且在Vue实例数据变化时更新表单元素的值。Vue组件是可复用的Vue实例，具有自己的模板、状态和行为。mixins可以将多个组件之间的共享功能抽离出来，形成一个混入对象，在组件中引入该混入对象即可获得该对象的所有属性和方法。
Vue小练习---TodoList案例（含代码）
m0_55877024的博客
05-08 683
Vue小练习---TodoList案例（含代码）
Vue基础测试题整理
lovewulibingbing的博客
03-31 2435
1.什么是vue? 前端渐进式javaScript框架 2.框架和库的区别 框架是一套完整的解决方案，对项目侵入性大，项目如果需要更换框架，则需要重新架构整个项目。 库是提供某个小功能，对项目入侵性小，若库不适用，很容易切换到其他库 3.mvc与mvvm的区别 MVC是后端的分层开发概念MVVM是前端视图层的概念，主要关注与视图层分离，也就是把前端视图层分成了三部分Model、view、VMViewModel； MVC中M是model层：负责操纵数据库 。V是view层：视图层，发送请求，接收响应。C是co
Vue代码练习
m0_74417939的博客
01-02 309
v-if和v-else-if和v-else v-show。v-bind和v-model。
vue.js项目开发综合实践习题
06-04
### Vue.js项目开发综合实践习题知识点解析 #### 一、Vue.js基本概念 - **Vue.js特性**： - **轻量级**：Vue.js以其较小的体积和高效的性能著称，在现代前端开发框架中占据一席之地。 - **数据绑定**：Vue.js...
vue面试题，面试实例
12-31
1. **Vue组件**：Vue的核心特性之一是组件化开发，它允许开发者将UI拆分为可重用的部件。创建组件涉及定义模板、数据、方法和生命周期钩子等。 2. **生命周期**：Vue组件有自己的生命周期，包括挂载、更新和卸载...
用vue实现走一走
2302_79245293的博客
12-14 50
【代码】用vue实现走一走。
【Vue基础】Vue基础自测45题
一个普通人的博客
10-03 3137
①Vue是一套构建用户界面的渐进式框架；与其他重量级框架不同的是，Vue 采用**自底向上增量开发**的设计。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。②核心理念组件化开发、数据驱动视图( 双向数据绑定 )MVC是前后端未分离时的分层开发概念，MVVM是前后端分离后的前端开发的概念；细说就是( 以下为个人理解，或有谬误，欢迎指正 )：MVC和MVVM中的Model层都用于数据操作，但是二者有本质区别，MVC中的Model是真正的服务端数据库，
Vue.js官网练习代码【所有代码均可运行，更便捷地理解官网解释】(可对照查看)
hannah2233的博客
03-17 649
文章目录1-1 0-组件化应用构建1-2 0-起步1-3 1-模板语法1-4 2-dataProperty和方法1-5 3-计算属性和侦听器1-6 4-class与Style的绑定1-7 5-条件渲染1-9 6-列表渲染1-10 6-一个todo列表1-11 7-事件处理1-12 8-表单输入绑定 1-1 0-组件化应用构建 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&gt
vue的基本属性及其代码示例（十分钟带你学会Vue）
weixin_52859229的博客
04-11 885
计算属性：可以理解为能够在里面写一些计算逻辑的属性。作用：1.减少模板中的计算逻辑。2.数据缓存。当我们的数据没有变化时，不再执行计算过程。3.依赖固定的数据类型（响应式数据），不能是普通的传入的一个全局的数据。
【vue指令的区别】
m0_72815229的博客
11-02 167
【代码】【vue指令的区别】
VUE典型例题
tonysxiaobao的博客
11-06 445
VUE典型例题
Vue实现练习题模板，单选、多选、输入域
qying的博客
10-28 1700
模板支持手动切换上一题、下一题(未完成本题不能切换)、提交(未完成所有题不能提交)，支持单选、多选、输出框类型的题。！！
vue部分手写面试题
AndyWangWangWang的博客
11-09 1022
vue部分手写面试题
初学vue案例练习题
08-23
初学Vue的案例练习题可以从以下几个方面进行练习： 1. 组件的基本使用：创建一个Vue组件，在模板中展示一些静态文本或数据，并在组件中定义一些基本的数据和方法。 2. 数据绑定：练习使用v-model指令和数据绑定来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值