vue3中v-on 、v-model与v-for和v-bind

最新推荐文章于 2024-07-04 10:41:11 发布

臧兮兮

最新推荐文章于 2024-07-04 10:41:11 发布

阅读量410

点赞数

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_50666902/article/details/120825776

版权

本文深入探讨Vue3中的核心指令，包括v-on的事件监听，如何使用@简写，v-for指令用于数组数据的列表渲染，v-model实现双向数据绑定，以及v-bind在传递属性到组件中的应用。通过这些指令，开发者能够更高效地构建Vue3应用程序。

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

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>佳丽列表</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                inputValue: '',
                list: []
            }
        },
        methods: {
            handleAddItem() {
                this.list.push(this.inputValue)
                this.inputValue = ''
            }
        },
        template: `
            <div>
                <my-title />
                <input v-model="inputValue" />
                <button v-on:click="handl