游客
Vue笔记
雨同学
雨同学 SVIPLv.1
字数：1884，阅读约7分钟

Vue笔记

VUE
20
0
0
一言准备中...

数据绑定

v-if和v-show区别

渲染方式：
v-if：根据条件动态渲染或移除元素，适用于条件不频繁变化的场景。
v-show：始终渲染元素，只是通过 CSS 控制显示或隐藏，适用于频繁切换显示状态的场景。
性能：
v-if 需要插入和删除元素，性能开销较大，适合渲染条件较少变化的情况。
v-show 只修改 CSS 样式，性能开销较小，适合在需要频繁切换显示状态时使用。
总结：
使用 v-if 时，元素会根据条件进行动态渲染，适合条件变化较少的情况。
使用 v-show 时，元素会始终存在于 DOM 中，仅通过样式控制是否显示，适合频繁切换的情况。

v-for

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

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

<body>
    <div id="app">
        <ul>
            <li v-for="i in lists">{{i}}</li>
        </ul>
    </div>

</body>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            lists: ['唱', '跳', 'rap', '篮球']
        },
    }

    )

</script>

</html>

v-model：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="i in lists">{{ i }}</li>
        </ul>
        <hr>
        账户<input type="text" v-model="username">
        <p>用户名：{{ username }}</p> <!-- 显示输入框中绑定的值 -->

        <button @click="login">登录</button><br>
        <button @click="reset">重置</button>
    </div>

</body>

<script>
    const vm = new Vue({
        el: '#app',
        data: {
            username: 'cs',
            password: 'cs',
            lists: ['唱', '跳', 'rap', '篮球']
        },
        methods: {
            login() {
                console.log(this.username)
            },
            reset(){
                this.username = ''
            }

        },
    });
</script>

</html>

用于创建双向数据绑定，它会将表单元素（如 、

评论区
内容为空

这一切，似未曾拥有

icp备案 湘ICP备2025106423号-1 本站一些文章来自互联网收集，仅供用于学习和交流，请遵循相关法律法规。
本站一切资源不代表本站立场，如有侵权/违规/不妥请联系本站删除，敬请谅解。
Copyright © 2025powered by emlog
繁
  • 更多按钮添加，前往
    页面设置 - 浮动按钮
  • 复制图片
  • 复制图片地址
按住ctrl可打开默认菜单