todolost2

新闻标题：

新闻地址：

新闻类别：

            <option v-for="(item,index) in box">{{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>
    <button 
        v-for="(item,index) in box"
        @click="changes(index)"
        :class="{isred:index==num}"
        >{{item}}</button>
    <hr>
    <ul v-cloak>
        <li
            v-for="(item,index) in list_kj"
            v-show="btns=='科技'" 
            :key="item.a" 
            :class="{isodd:index%2==0,iseven:index%2==!0}"
        >
            <!-- <span>[{{item.select}}]</span> -->
            <a 
            :href="item.link" 
            :class="{active:item.radio=='是'}">{{item.text}}</a>
            <span  v-once>{{getTime()}}</span>
            <button @click="handleDelKj(index)">删除</button>
        </li>
        <li 
            v-for="(item,index) in list_yl"
            v-show="btns=='娱乐'" 
            :key="item.b" 
            :class="{isodd:index%2==0,iseven:index%2==!0}"
        >
            <!-- <span>[{{item.select}}]</span> -->
            <a 
            :href="item.link"
            :class="{active:item.radio=='是'}">{{item.text}}</a>
            <span v-once>{{getTime()}}</span>
            <button @click="handleDelYl(index)">删除</button>
        </li>
        <li 
            v-for="(item,index) in list_ty" 
            v-show="btns=='体育'"
            :key="item.c" 
            :class="{isodd:index%2==0,iseven:index%2==!0}"
        >
            <!-- <span>[{{item.select}}]</span> -->
            <a 
            :href="item.link"
            :class="{active:item.radio=='是'}">{{item.text}}</a>
            <span v-once>{{getTime()}}</span>
            <button @click="handleDelTy(index)">删除</button>
        </li>
        <li 
            v-for="(item,index) in list_cj" 
            v-show="btns=='财经'"
            :key="item.d" 
            :class="{isodd:index%2==0,iseven:index%2==!0}"
        >
            <!-- <span>[{{item.select}}]</span> -->
            <a 
            :href="item.link"
            :class="{active:item.radio=='是'}">{{item.text}}</a>
            <span v-once>{{getTime()}}</span>
            <button @click="handleDelCj(index)">删除</button>
        </li>
    </ul>
</div>
<script>

    let vm = new Vue({
        el: "#app",
        data: {
            inputVal: '',
            link: "",
            selectVal: "科技",
            list_kj: [],
            list_yl: [],
            list_ty: [],
            list_cj: [],
            btns:"科技",
            radioVal: "是",
            num:0,
            box: ["科技", "娱乐", "体育", "财经"],
           
        },
        methods: {
            changes(index) {
                this.num = index;
                switch(index){
                    case 0:
                        this.btns="科技";
                        break;
                    case 1:
                        this.btns="娱乐";
                        break;
                    case 2:
                        this.btns="体育";
                        break;
                    case 3:
                        this.btns="财经";
                        break;
                    default:
                        break;
                }
            },
            
            handleAdd() {
                var obj = {};
                obj.select = this.selectVal;
                obj.text = this.inputVal;
                obj.link = this.link;
                obj.radio = this.radioVal;
                switch(this.selectVal){
                    case "科技":
                        this.list_kj.push(obj);
                        break;
                    case "娱乐":
                        this.list_yl.push(obj);
                        break;
                    case "体育":
                        this.list_ty.push(obj);
                        break;
                    case "财经":
                        this.list_cj.push(obj);
                        break;
                    default:
                        break;
                }    
                this.inputVal = "";
                this.link = "";
                this.selectVal = "科技";
                this.radioVal = "是";
            },
            handleDelCj(index) {
                this.list_cj.splice(index, 1)
            },
            handleDelKj(index) {
                this.list_kj.splice(index, 1)

            },
            handleDelYl(index) {
                this.list_yl.splice(index, 1)
            },
            handleDelTy(index) {
                this.list_ty.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>