简单的todulist

在这里插入图片描述

One

新闻类别:

            <option v-for="(s_item,index) in box">{{s_item}}</option>
        </select>
    </p>
    <p>
        是否标红:
        <label>
            是<input type="radio" value="是" v-model="radioVal">
        </label>
        <label>
            否<input type="radio" value="否" v-model="radioVal">
        </label>
    </p>
    <button @click="handleAdd()">提交</button>
    <hr>
    <ul>
        <li v-for="(item,index) in list" :key="item.id" >
            <span>[{{item.select}}]</span>
            <a :href="item.link" :class="{active:item.radio=='是'}">{{item.text}}</a>
            <span class="time" v-once>{{getTime()}}</span>
            <button @click="handleDel(index)">删除</button>
        </li>
    </ul>
</div>
<script>

    let vm = new Vue({
        el: "#app",
        data: {
            inputVal: '',
            link: "",
            selectVal: "科技",
            list: [],
            radioVal: "是",
            date: "new date",
            box: ["科技", "娱乐", "体育", "财经"]
        },
        methods: {
            handleAdd() {
                var obj = {};
                obj.text = this.inputVal;
                obj.link = this.link;
                obj.select = this.selectVal;
                obj.radio = this.radioVal;
                this.list.push(obj);
                this.inputVal = "";
                this.link = "";
                this.selectVal = "科技";
                this.radioVal = "是";
                
            },
            handleDel(index) {
                this.list.splice(index, 1)
            },
            // 时间戳
            getTime() {
                let timeStr = "";
                let date = new Date();
                let y = date.getFullYear(),
                    m = date.getMonth() + 1,
                    d = date.getDate(),
                    h = date.getHours(),
                    i = date.getMinutes(),
                    s = date.getSeconds();
                if (m < 10) { m = '0' + m; }
                if (d < 10) { d = '0' + d; }
                if (h < 10) { h = '0' + h; }
                if (i < 10) { i = '0' + i; }
                if (s < 10) { s = '0' + s; }
                timeStr += y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;
                return timeStr;
            }
        }
    })
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值