Vue2从基础到实战（指令篇）

元气满满的热码式

于 2024-07-28 19:59:09 发布

阅读量610

点赞数 14

文章标签： vue.js html5 前端前端框架

本文链接：https://blog.csdn.net/m0_66011019/article/details/140755022

版权

案例：动态切换图片

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

双向绑定指令:

数据改变后，呈现的页面结果会更新
页面结果更新后，数据也会随之而变

作用： 给表单元素（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: 定义了组件的数据，包含 username 和 password。
methods: 定义了组件的方法。
- login(): 当用户点击“登录”按钮时，会弹出一个包含用户名和密码的警告框。
- reset(): 当用户点击“重置”按钮时，会清空用户名和密码输入框

元气满满的热码式

关注

14
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue2从基础到实战（指令篇）

（input、radio、select）使用，双向绑定数据，可以快速。index 是每一项的索引，不需要可以省略。Vue 的默认行为会尝试原地修改元素（数据改变后，呈现的页面结果会更新。页面结果更新后，数据也会随之而变。v-for 指令需要使用。item 是数组中的每一项。便于Vue进行列表项的。v-model="变量"arr 是被遍历的数组。
复制链接

扫一扫