Vue——初級小項目（小清單）

本文轉載自查看原文 2018-07-31 02:04 2076 Vue/ Vue框架

Vue——小清單

　　如圖：

需要完成功能：

　　（1）通過bootstrap搭建出項目雛形

　　（2）在輸入框內通過v-mode命令l實現數據雙向交互。

　　（3）通過v-bind/v-on等命令實現點擊按鈕使按鈕變綠（原來是黑色）。

　　（4）點擊刪除此清單。

代碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <script src="inputfiles/vue.js"></script>
    <style>
        .changeGreen {
            color: green
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">

                <div class="panel panel-info" id='app' style="margin-top:60px">
                    <div class="panel-heading">
                        <h3 class="panel-title">Panel title</h3>
                    </div>
                    <div class="panel-body">

                        <!-- input-group -->
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Search for..." v-model='items.title'>
                            <span class="input-group-btn">
                                <button class="btn btn-default" type="button" v-on:click="addItem">

                                    <!--加號開始-->
                                    <span class='glyphicon glyphicon-plus'></span>
                                    <!--加號結束-->

                                </button>
                            </span>
                        </div>
                        <!-- /input-group -->

                        <!--水平線開始-->
                        <hr>
                        <!--水平線結束-->

                        <!--列表組開始-->
                        <div class="list-group">
                            <div v-for="(vars,index) in todoList" class="list-group-item">

                                <!--對號圖標開始-->
                                <span v-bind:class={changeGreen:vars.ok} v-on:click='hasgreen(index)' class="glyphicon glyphicon-ok-sign"></span>
                                <!--對號圖標結束-->

                                &nbsp&nbsp{{vars.title}}

                                <!--刪除圖標開始-->
                                <span v-on:click='remove(index)' class="glyphicon glyphicon-remove-circle pull-right"></span>
                                <!--刪除圖標結束-->

                            </div>
                        </div>
                        <!--列表組結束-->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                todoList: [

                ],
                color: false,
                items: {
                    title: '',
                    ok: false
                }
            },
            methods: {
                hasgreen: function (index) {
                    this.todoList[index].ok = 'true'
                },
                addItem: function () {
                    var obj = Object.assign({}, this.items)
                    this.todoList.push(obj)
                    this.items.title = ''
                },
                remove: function (index) {
                    console.log(this.todoList)
                    this.todoList.splice(index, 1)
                }
            }
        })
    </script>
</body>

</html>

注意事項：

　　v-for循環時對象參數最好攜程argvs復數形式。不然會莫名其妙報錯

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 小項目，吃貨聯盟，java初級小項目，源代碼吃貨聯盟源代碼 Java初級小項目嗖嗖移動大廳源代碼 Java初級小項目擲骰子游戲窗體實現--Java初級小項目 vue小項目---管理系統 Vue 小項目的最佳實踐一個 Vue & Node 的全棧小項目跟我一起做一個vue的小項目（二）跟我一起做一個vue的小項目（八）一個vue練手的小項目