学习 Vue.js 第一发【 todo list (IMWeb训练营作业)】

最新推荐文章于 2019-09-24 12:28:41 发布

我刚好路过

最新推荐文章于 2019-09-24 12:28:41 发布

阅读量500

点赞数

本文链接：https://blog.csdn.net/qq570701203/article/details/70237474

版权

Vue.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一个 Vue.js 的简单 todo list 效果：

1、在文本框输入内容，按回车键【Enter】即可生成列表项；

2、点击列表项可改变列表项样式；

直接代码：

【HTML】

<div id="app">
    <h1 v-text="title"></h1>
    <p>{{ msg }}</p>

    <input type="text" v-model.trim="inputValue" @keyup.enter="inputClick" placeholder="输入回车添加列表项">
    <ul>
        <li v-for="(item, index) in items" :class="{ active: item.judge }" @click="liClick(item)">{{ index + 1 }}、{{ item.text }}<!-- <span @click="liHide(item)">X</span>--></li>
    </ul>
</div>

【JS】

new Vue({
        el: "#app",
        data: {
            title: 'TODO LIST',
            msg: 'vue.js 第一个小实例',
            items: [
                {
                    text: '第一是 HTML',
                    judge: true
                },
                {
                    text: '第二是 CSS',
                    judge: true
                },
                {
                    text: '第三是 javascript',
                    judge: true
                },
                {
                    text: '第四是 Vue.js',
                    judge: false
                }
            ],
            inputValue: ''
        },
        methods: {
            // 列表项点击事件
            liClick: function (item){
                item.judge = !item.judge
            },
            // 文本框回车事件
            inputClick: function (){
                // console.log(this.inputValue)
                // console.log(this.inputValue.length)
                if(this.inputValue.length >= 1){
                    this.items.push({
                        text: '新增：' + this.inputValue,
                        judge: false
                    })
                    this.inputValue = ''
                }
            }
        }
    })

END