后端工程师的vue课（一）----封装一个组件

最新推荐文章于 2024-07-19 20:19:04 发布

西城xml

最新推荐文章于 2024-07-19 20:19:04 发布

阅读量337

点赞数

分类专栏：前端技术

本文链接：https://blog.csdn.net/xichengqc/article/details/93534768

版权

前端技术专栏收录该内容

4 篇文章 0 订阅

订阅专栏

引入vue.js
编写一个div标签，并用new Vue进行初始化
在这个标签内写一个input框，并绑定info属性
写一个button按钮，绑定一个点击事件
基于li封装一个todo-item组件，里边写一个属性value，绑定一个叫item-class的class属性
在ul中使用todo-item组件，将list中的值遍历出来赋给todo-item
设定全局class属性的color为red
完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>封装组件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="info">
        <button  @click="handleClick">添加</button>
        <div>
            <ul>
                <todo-item v-for="item in list" :value="item"></todo-item>
            </ul>
        </div>
    </div>
    <script>
        Vue.component("todo-item", {
            props: ['value'],
            template: '<li class="item-class">{{value}}</li>'
        });
        new Vue({
            el: "#app",
            data() {
                return {
                    info: '', // 输入框信息
                    list: [],
                }
            },
            methods: {
                handleClick() {
                    this.list.push(this.info);
                    this.info = '';
                }
            }
        });
    </script>
    <style>
        .item-class {
            color: red;
        }
    </style>
</body>
</html>