Geek

博客园 首页 新随笔 联系 订阅 管理
  131 随笔 :: 2 文章 :: 7 评论 :: 40902 阅读
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        count : {{size}}
        <input type="text" v-model="inputValue">
        <button @click="press">press</button>
        <ul>
           <todo-item :content="i"
                      v-for="(i,index) in list"
                      :index="index"
                      @delete="deleteChild(index)"></todo-item>
        </ul>
    </div>

    <script>

        let todoItem = {
            props:['content'],
            template:'<li @click="press">{{content}}</li>',
            methods: {
                press(target) {
                    this.$emit('delete')
                }
            }
        }
        const app = new Vue({
            el:'#app',
            data:{
                list:['第一','第二'],
                inputValue:'',
                count:0
            },
            components:{
              TodoItem:todoItem
            },
            methods:{
                press: function () {
                    // alert("press")
                    this.list.push(app.$data.inputValue)
                    this.inputValue = ''
                },
                deleteChild:function (childNode) {
                    console.log(childNode)
                    this.list.splice(childNode,1)
                }
            },
            watch:{
                list:function (list,newlist) {
                    this.count = newlist.length
                },
                inputValue:function (oldVal,newVal) {
                    console.log(newVal)

                }
            },
            computed:{
                size:{
                    get() {
                        return this.count;
                    },
                    set(value) {
                        console.log(value)
                    }
                }
            }
        })

       
    </script>

</body>
</html>
复制代码

 

posted on   .geek  阅读(231)  评论(0编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥
点击右上角即可分享
微信分享提示