imweb训练营作业（一）

来源：互联网发布：软件系统维护收费标准编辑：程序博客网时间：2024/06/05 05:57
在线地址 https://jsbin.com/depupifuzo/1/edit?html,css

###代码
<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width">    <title>JS Bin</title>    <script src="https://code.jquery.com/jquery.min.js"></script>    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script></head><body>    <div id="js-my-list" class="container">        <div class="form-group">            <label>文字颜色</label>            <button v-for="item in color" v-bind:class="['btn', 'btn-'+item,{active:curColor==item}]" v-on:click="curTextColor(item)">{{item}}</button>        </div>        <div class="form-group">            <label>背景颜色</label>            <button v-for="item in color" v-bind:class="['btn', 'btn-'+item,{active:curBg==item}]" v-on:click="curBgColor(item)">{{item}}</button>        </div>        <div class="form-group clearfix">            <label class="col-sm-2">内容</label>            <div class="col-sm-8">                <input type="text" class="form-control" v-model="myText">            </div>            <button type="button" class="col-sm-2 btn btn-info" v-on:click="addItem">添加</button>        </div>        <div v-if="todo.length">            <div v-bind:class="['text-'+item.color,'bg-'+item.background,'form-group','clearfix']" v-for="item in todo" :key="item.data">                <p class="col-sm-10">{{item.label}}</p>                <button type="button" class="btn btn-danger btn-sm col-sm-2" v-on:click="delItem(item)">删除</button>            </div>        </div>        <div class="alert alert-danger" v-else>            <p>hello! imweb,请添加数据！！</p>        </div>    </div>    <script>        new Vue({            el: '#js-my-list',            data: {                myText: '',                curColor: '',                curBg: '',                todo: [],                color: ['default', 'primary', 'success', 'info', 'warning', 'danger']            },            methods: {                addItem: function() {                    this.todo.unshift({                        label: this.myText,                        background: this.curBg,                        color: this.curColor,                        data: Date.now()                    })                },                curTextColor: function(item) {                    this.curColor = item;                },                curBgColor: function(item) {                    this.curBg = item;                },                delItem: function(item) {                     for (var i = 0; i < this.todo.length; i++) {                        if (this.todo[i].data == item.data) {                            this.todo.splice(i, 1);                        }                    }                }            }        });    </script></body></html>
效果预览

这里写图片描述
0 0