标签：Vue 06 -- items completed content item id

Vue全家桶--06 ToDoMVC

6.1 项目介绍与演示

 

6.2 需求说明

 

6.3 下载与导入模板

 

6.4 初始化项目

 

6.5 数据列表渲染

6.5.1 功能分析

 

6.5.2 有数据列表功能实现

app.js声明一个存储任务数据的数组items，并初始化一些数据，注意ES6的写法

(function (Vue) {//表示依赖了全局的 Vue, 其实不加也可以，只是更加明确点
    
    //const 表示申明的变量是不可变得，ES6
    const items=[
        {
            id:1,
            content:'Vue/js',
            completed:false
        },
        {
            id:2,
            content:'java',
            completed:false
        },
        {
            id:3,
            content:'C#',
            completed:true
        }
    ]

    new Vue({
        el:'#todoapp',
        data:{
            title:'Hello,todos',
            items // 对象属性简写，等价于items: items
        }

    });

})(Vue);

修改html页面

<ul class="todo-list">
                    <!-- 
                        三种状态：未完成(没有样式)，已完成(.completed)，编辑中(.editing)
                     -->
                     <!-- 修改1.v-for迭代;2.:class={key为class样式名，value为获取的数据true或false} -->
                    <li v-for='(item,index) in items' :class="{completed:item.completed}">
                        <div class="view">
                            <!-- 修改：1.v-model绑定状态值是否选中 -->
                            <input class="toggle" type="checkbox" v-model="item.completed">
                            <!-- 修改：1.{{content}}显示内容 -->
                            <label>{{item.content}}</label>
                            <!-- 修改：1. :value 绑定id删除 -->
                            <button class="destroy" :value="item.id"></button>
                        </div>
                        <input class="edit" value="Create a TodoMVC template">
                    </li>
                </ul>

 

6.5.3 无数据列表功能实现

**原标签直接添加 v-show 方式

<!-- item.length 当值为0时，表示false,则不显示 -->
            <section class="main" v-show="items.length">
                <input id="toggle-all" class="toggle-all" type="checkbox">
                <label for="toggle-all">Mark all as complete</label>
                <ul class="todo-list">
                    <!-- 
                        三种状态：未完成(没有样式)，已完成(.completed)，编辑中(.editing)
                     -->
                     <!-- 修改1.v-for迭代;2.:class={key为class样式名，value为获取的数据true或false} -->
                    <li v-for='(item,index) in items' :class="{completed:item.completed}">
                        <div class="view">
                            <!-- 修改：1.v-model绑定状态值是否选中 -->
                            <input class="toggle" type="checkbox" v-model="item.completed">
                            <!-- 修改：1.{{content}}显示内容 -->
                            <label>{{item.content}}</label>
                            <!-- 修改：1. :value 绑定id删除 -->
                            <button class="destroy" :value="item.id"></button>
                        </div>
                        <input class="edit" value="Create a TodoMVC template">
                    </li>
                </ul>
            </section>
            <!-- item.length 当值为0时，表示false,则不显示 -->
            <footer class="footer" v-show="items.length">

**添加一个div标签 再加上v-show 方式

<!-- item.length 当值为0时，表示false,则不显示 -->
        <div v-show="items.length">
            <section class="main">
                <input id="toggle-all" class="toggle-all" type="checkbox">
                <label for="toggle-all">Mark all as complete</label>
                <ul class="todo-list">
                    <!-- 
                        三种状态：未完成(没有样式)，已完成(.completed)，编辑中(.editing)
                     -->
                    <!-- 修改1.v-for迭代;2.:class={key为class样式名，value为获取的数据true或false} -->
                    <li v-for='(item,index) in items' :class="{completed:item.completed}">
                        <div class="view">
                            <!-- 修改：1.v-model绑定状态值是否选中 -->
                            <input class="toggle" type="checkbox" v-model="item.completed">
                            <!-- 修改：1.{{content}}显示内容 -->
                            <label>{{item.content}}</label>
                            <!-- 修改：1. :value 绑定id删除 -->
                            <button class="destroy" :value="item.id"></button>
                        </div>
                        <input class="edit" value="Create a TodoMVC template">
                    </li>
                </ul>
            </section>
            <footer class="footer">
                <!-- This should be `0 items left` by default -->
                <span class="todo-count"><strong>0</strong> item left</span>
                <!-- Remove this if you don't implement routing -->
                <ul class="filters">
                    <li>
                        <a class="selected" href="#/">All</a>
                    </li>
                    <li>
                        <a href="#/active">Active</a>
                    </li>
                    <li>
                        <a href="#/completed">Completed</a>
                    </li>
                </ul>
                <!-- Hidden if no completed items are left ↓ -->
                <button class="clear-completed">Clear completed</button>
            </footer>
        </div>

**template 与 v-if 结合使用的方式

<!-- template元素，页面渲染之后这个template元素就不会有，
        需要使用 v-if 与 template搭配，如果使用 v-show 是不行的 -->
        <template v-if="items.length">
            <section class="main">
                <input id="toggle-all" class="toggle-all" type="checkbox">
                <label for="toggle-all">Mark all as complete</label>
                <ul class="todo-list">
                    <!-- 
                        三种状态：未完成(没有样式)，已完成(.completed)，编辑中(.editing)
                     -->
                    <!-- 修改1.v-for迭代;2.:class={key为class样式名，value为获取的数据true或false} -->
                    <li v-for='(item,index) in items' :class="{completed:item.completed}">
                        <div class="view">
                            <!-- 修改：1.v-model绑定状态值是否选中 -->
                            <input class="toggle" type="checkbox" v-model="item.completed">
                            <!-- 修改：1.{{content}}显示内容 -->
                            <label>{{item.content}}</label>
                            <!-- 修改：1. :value 绑定id删除 -->
                            <button class="destroy" :value="item.id"></button>
                        </div>
                        <input class="edit" value="Create a TodoMVC template">
                    </li>
                </ul>
            </section>
            <footer class="footer">
                <!-- This should be `0 items left` by default -->
                <span class="todo-count"><strong>0</strong> item left</span>
                <!-- Remove this if you don't implement routing -->
                <ul class="filters">
                    <li>
                        <a class="selected" href="#/">All</a>
                    </li>
                    <li>
                        <a href="#/active">Active</a>
                    </li>
                    <li>
                        <a href="#/completed">Completed</a>
                    </li>
                </ul>
                <!-- Hidden if no completed items are left ↓ -->
                <button class="clear-completed">Clear completed</button>
            </footer>
        </template>

 

6.6 添加任务

文本框中可添加新的任务；内容不能为空；enter添加，添加完清空文本框

<!-- 添加任务，keyup.enter 回车键监听 -->
            <input class="new-todo" @keyup.enter="addItem" placeholder="What needs to be done?" autofocus>

new Vue({
        el: '#todoapp',
        data: {
            title: 'Hello,todos',
            items // 对象属性简写，等价于items: items
        },
        methods: {
            addItem(event) { //对象属性函数简写,等价于addItem:function(){} ES6
                
                const content = event.target.value.trim();//获取文本框输入的数据,去除空格
                const id = this.items.length;//生成id

                if (content.length > 0) {//输入框不为空添加到数组中
                    this.items.push({
                        id,//ES6 等价于id:id
                        content,
                        completed: false
                    });
                } else { return; }

                event.target.value='';//清空文本

            }
        }

    });

 

6.7 显示所有未完成任务数

 计算属性来完成

<span class="todo-count"><strong>{{remaining}}</strong> item{{remaining === 1?'':'s'}} left</span>

new Vue({
        el: '#todoapp',
        data: {
            title: 'Hello,todos',
            items // 对象属性简写，等价于items: items
        },
        computed: {
            remaining() {
                const unItems =
                    this.items.filter(item => {
                        return !item.completed;
                    });
                //console.log(unItems);
                return unItems.length;
            }
        },
        methods: {
            addItem(event) { //对象属性函数简写,等价于addItem:function(){} ES6
                const content = event.target.value.trim();//获取文本框输入的数据,去除空格
                const id = this.items.length;//生成id
                if (content.length > 0) {//输入框不为空添加到数组中
                    this.items.push({
                        id,//ES6 等价于id:id
                        content,
                        completed: false
                    });
                } else { return; }
                event.target.value = '';//清空文本
            }
        }

    });

 

6.8 切换所有任务状态

计算属性--toggleAll

双向绑定计算属性

<input id="toggle-all" v-model="toggleAll" class="toggle-all" type="checkbox">

toggleAll: {
                //当任务列表 中的状态发生变化之后，则更新复选框的状态
                get() {
                    return this.remaining === 0;
                },
                //当复选框的状态更新之后，则将任务列表中的状态更新
                set(newValue) { //newValue 当计算属性toggleAll改变时，newValue获取改变后的值

                    //当点击复选框之后，复选框的值会发生改变，就会触发set方法调用
                    //将迭代出数组中的所有任务项，然后将当前复选框的状态值赋值给每一个任务的状态值
                    this.items.forEach(item => {
                        item.completed = newValue;
                    });
                }
            }

 

6.9 移除任务项

removeItem函数

<button class="destroy" :value="item.id" @click="removeItem(index)"></button>

    //移除任务项
            removeItem(index) { 
                console.log(index);
                this.items.splice(index, 1);
            }

 

6.10 清楚所有已完成的任务

 添加一个 removecompleted 函数绑定到 清楚已完成任务按钮上，并且添加v-show标签

<button v-show="items.length > remaining" @click="removecompleted" class="clear-completed">Clear completed</button>

removecompleted(){
               this.items =    this.items.filter( item => !item.completed);
            }

 

6.11 编辑任务项

 

6.12 路由状态切换(过滤不同状态数据)

 

6.13 数据持久化

 

标签：Vue,06,--,items,completed,content,item,id
来源： https://www.cnblogs.com/youguess/p/15456849.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。