Vue 表单二输入提交并显示输入的数据及下拉输出显示

最新推荐文章于 2023-04-06 16:48:31 发布

鲸是鲸鱼的鲸

最新推荐文章于 2023-04-06 16:48:31 发布

阅读量497

点赞数

文章标签： Vue

本文链接：https://blog.csdn.net/weixin_44195250/article/details/97392153

版权

Vue 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

首先感谢老马的一波贡献
<!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>第二个</title>
    <style>
        .active {
            color:red;
        }
 
        .isred,.isodd {
            background:#FFA07A;
        }
 
        .iseven {
            background: #bbb;
        }
 
        #app {
            width: 800px;
            margin: 100px auto;
        }
 
        ul>li>button {
            background: rgba(0, 0, 0, 0);
            border: none;
        }
    </style>
    <!-- <script src="vue.js"></script> -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
 
<body>
    <div id="app">
        <p>
            <label>
                新闻标题：<input type="text" v-model="inputVal">
            </label>
        </p>
        <p>
            <label>
                新闻地址：<input type="text" v-model="link">
            </label>
        </p>
        <p>
            新闻类别：<select v-model="selectVal">
 
                <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;
                    // 利用selectVal的值的不同筛选数据，并放入不同的数组中
                    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>
</body>
 
</html>

鲸是鲸鱼的鲸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 表单二输入提交并显示输入的数据及下拉输出显示

首先感谢老马的一波贡献<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h...
复制链接

扫一扫