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

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

鲸是鲸鱼的鲸

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

阅读量1.4k

点赞数

文章标签： Vue

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

版权

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>Document</title>
    <style>
        .active{
            color: red;
        }
    </style>
</head>
<script src="vue.js"></script>

<body>
    <div id="app">
        <label>
            新闻标题：<input type="text" v-model="NewsTitle">
        </label>
        <br>
        <label>
            新闻地址：<input type="text" v-model="link">
        </label>
        <br>
        <label>
            新闻类别：<select v-model="newType">
                <option v-for="(item,index) in newsTypeBox" :value="item">{{item}}</option>
            </select>
        </label>
        <br>
        <label>
            是否标红:&emsp;是 <input type="radio" value="是" v-model="isRed">
            否 <input type="radio" value="否" v-model="isRed">
        </label>
        <br>
        <button @click="handleAdd();getTime();">提交</button>
        <hr>
        <ul>
            <li v-for="(item,index) in arr"  :key='index'>
                <span>[{{item.newType}}]</span>
                <a :href="item.link" :class="{active:item.isRed == '是'}">{{item.NewsTitle}}</a>
                <span v-once>{{getTime()}}</span>
            </li>
        </ul>
    </div>

</body>

</html>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            newsTypeBox:["科技","财经","体育"],
            isRed: "是",
            link: "",
            NewsTitle: "",
            newType:"科技",
            arr: [],
 
        },
        methods: {
            handleAdd() {
                var obj = {};
                obj.NewsTitle = this.NewsTitle;
                obj.link = this.link;
                obj.newType = this.newType;
                obj.isRed=this.isRed;
                //插入数据
                this.arr.push(obj);
                //初始化数据
                this.newType="科技";
                this.NewsTitle = "";
                this.link = "";
                this.isRed="是";
            },
            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>

鲸是鲸鱼的鲸

关注

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 http-equiv="X-...
复制链接

扫一扫