首页 前端知识 Vue2从基础到实战(指令篇)

Vue2从基础到实战(指令篇)

2024-08-20 09:08:51 前端知识 前端哥 341 260 我要收藏

案例:动态切换图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js 示例</title>
    <style>
        .box {
            border: 3px solid #000000;
            border-radius: 10px;
            padding: 20px;
            margin: 20px;
            width: 200px;
        }
        h3 {
            margin: 10px 0 20px 0;
        }
        p {
            margin: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="box">
            <button v-show="index > 0" @click="index--">上一页</button>
            <div>
                <img :src="list[index]" alt="">
            </div>
            <button v-show="index < 2" @click="index++">下一页</button>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                index: 0,
                list: [
                    './imgs/1.png',
                    './imgs/2.png',
                    './imgs/3.png'
                ]
            }
        })
    </script>
</body>
</html>

实现效果:

 

v-for

v-for 指令需要使用 (item, index) in arr 形式的特殊语法,其中:

  • item 是数组中的每一项

  • index 是每一项的索引,不需要可以省略

  • arr 是被遍历的数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js 示例</title>
    <style>
        .box {
            border: 3px solid #000000;
            border-radius: 10px;
            padding: 20px;
            margin: 20px;
            width: 200px;
        }
        h3 {
            margin: 10px 0 20px 0;
        }
        p {
            margin: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="box">
            <h3>sx水果店</h3>
            <ul>
                <li v-for="item in list">
                    {{ item }}
                </li>
                
            </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                
                list: ['西瓜','苹果','鸭梨']
            }
        })
    </script>
</body>
</html>

v-for中的key

语法: key="唯一值"

作用:给列表项添加的唯一标识。便于Vue进行列表项的正确排序复用

为什么加key:Vue 的默认行为会尝试原地修改元素(就地复用

<ul>
  <li v-for="(item, index) in booksList" :key="item.id">
    <span>{{ item.name }}</span>
    <span>{{ item.author }}</span>
    <button @click="del(item.id)">删除</button>
  </li>
</ul>

 v-model

双向绑定指令:

  1. 数据改变后,呈现的页面结果会更新

  2. 页面结果更新后,数据也会随之而变

作用:表单元素(input、radio、select)使用,双向绑定数据,可以快速 获取设置 表单元素内容

语法:v-model="变量"

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js 示例</title>
    <style>
        .box {
            border: 3px solid #000000;
            border-radius: 10px;
            padding: 20px;
            margin: 20px;
            width: 200px;
        }
        h3 {
            margin: 10px 0 20px 0;
        }
        p {
            margin: 20px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="box">
            账户: <input type="text" v-model="username"> <br><br>
            密码:<input type="password" v-model="password"> <br><br>
            <button @click="login">登录</button>
            <button @click="reset">重置</button>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                username: '',
                password: ''
            },
            methods: {
                login() {
                    alert(`用户名: ${this.username}\n密码: ${this.password}`);
                },
                reset() {
                    this.username = '';
                    this.password = '';
                }
            }
        })
    </script>
</body>
</html>

  • <input type="text" v-model="username">: 使用 v-model 双向绑定输入框的值与 Vue 实例中的 username 数据。
  • <input type="password" v-model="password">: 使用 v-model 双向绑定输入框的值与 Vue 实例中的 password 数据。
  • <button @click="login">登录</button>: 绑定点击事件处理器 login 方法。
  • <button @click="reset">重置</button>: 绑定点击事件处理器 reset 方法。
  • data: 定义了组件的数据,包含 usernamepassword
  • methods: 定义了组件的方法。
    • login(): 当用户点击“登录”按钮时,会弹出一个包含用户名和密码的警告框。
    • reset(): 当用户点击“重置”按钮时,会清空用户名和密码输入框

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16271.html
标签
评论
发布的文章

在线OJ项目

2024-08-27 21:08:43

JSON2YOLO 项目教程

2024-08-27 21:08:42

Redis 实现哨兵模式

2024-08-27 21:08:22

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!