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

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

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

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

直接代码：

【HTML】

    

    
{
     { msg }}

    
    

        
{
     { index + 1 }}、{
     { item.text }}
    

【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