[03] Vue指令(2)

最新推荐文章于 2024-05-17 16:06:33 发布

亦昭昭

最新推荐文章于 2024-05-17 16:06:33 发布

阅读量1.9k

点赞数 57

分类专栏：记录vue学习文章标签： vue.js 前端

本文链接：https://blog.csdn.net/z240113765/article/details/136130302

版权

记录vue学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

属性绑定指令(v-bind)

作用：动态设置html的标签属性，比如：src、url、title
语法：v-bind:属性名=“表达式”
v-bind:可以简写成 => :

比如，有一个图片，它的 src 属性值是一个图片地址。这个地址在数据 data 中存储。

则可以这样设置属性值：

<img v-bind:src="url" />
<img :src="url" /> （v-bind可以省略）

在这里插入图片描述

<body>
    <div id="app">
        <img v-bind:src="imgUrl" v-bind:title="msg" alt="">
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                imgUrl: '/images/yueyue.jpg',
                msg: '悦悦！'
            }
        })
    </script>

</body>

等价于：<img :src="imgUrl" :title="msg" alt="">

列表渲染指令(v-for)

Vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。

v-for 指令语法： v-for="(item, index) in arr"

其中：

item 是数组中的每一项
index 是每一项的索引，不需要可以省略
arr 是被遍历的数组

此语法也可以遍历对象和数字。

<div id="app">
        <h3>animals</h3>
        <ul>
            <li v-for="(item,  index) in list">
                {{item}},{{index}}
            </li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                list: ['dog', 'cat', 'bird']
            }
        })
    </script>

在这里插入图片描述

v-for中的key

语法： key="唯一值"

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

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

注意：

key 的值只能是字符串或数字类型
key 的值必须具有唯一性
推荐使用id作为 key（唯一），不推荐使用index作为 key（会变化，不对应）

双向绑定指令(v-model)

双向绑定：

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

作用：给表单元素（input、radio、select）使用，双向绑定数据，可以快速获取或设置表单元素内容

语法：v-model="变量"

在这里插入图片描述

<div id="app">
        账号：<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>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                username: '',
                password: ''
            },
            methods: {
                login() {
                    console.log(this.username, this.password);
                },
                reset() {
                    this.username = ''
                    this.password = ''
                }
            }
        })
    </script>