Vue内置指令

最新推荐文章于 2024-11-03 21:56:29 发布

weixin_41387874

最新推荐文章于 2024-11-03 21:56:29 发布

阅读量193

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_41387874/article/details/122162472

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文通过实例展示了Vue.js中的v-if指令用于条件渲染，v-for指令用于列表渲染，以及数据绑定的基础用法。通过切换按钮控制邮箱和密码输入框的显示，以及动态添加书籍列表，详细阐述了Vue中响应式数据和视图更新的概念。

摘要由CSDN通过智能技术生成

v-if的使用

<!DOCTYPE html>
<html>
    <head>
        <title>css属性选择器</title>
        <style>
            [v-cloak]{
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="app" v-cloak>
            <template v-if="showEmail">
                <span>邮箱：</span>
                <input placeholder="请输入邮箱"></input>
            </template>
            <template v-else>
                <span>密码：</span>
                <input placeholder="请输入密码"></input>
            </template>
            <button @click="handleChange">切换</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    showEmail: true,
                },
                methods: {
                    handleChange(){
                        this.showEmail = !this.showEmail;
                    }
                },
            })
        </script>
    </body>
</html>

v-for的使用

<!DOCTYPE html>
<html>
    <head>
        <title>css属性选择器</title>
        <style>
            [v-cloak]{
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="app" v-cloak>
            <ul>
                <li v-for="book in books">{{ book.name }}</li>
            </ul>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    showEmail: true,
                    books: [
                        {name: "《a》"},
                        {name: "《b》"},
                        {name: "《c》"},
                    ]
                },
                methods: {
                    handleChange(){
                        this.showEmail = !this.showEmail;
                    }
                },
            })
        </script>
    </body>
</html>

数据绑定：数据与视图绑定

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <ul>
            <li v-for="book in books"> {{ book.name }} </li>
        </ul>
        <button @click="handleAdd">add</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                books: [
                    {name: "《a》"},
                    {name: "《b》"},
                ],
            },
            methods: {
                handleAdd(){
                    this.books.push({name: "《c》"});
                }
            }
        });
    </script>
</body>
</html>