Vue-案例-todolist（二）

最新推荐文章于 2022-10-15 16:06:54 发布

joker.ma

最新推荐文章于 2022-10-15 16:06:54 发布

阅读量172

点赞数

分类专栏：案例文章标签： Vue 表单 v-model 绑定选项卡

本文链接：https://blog.csdn.net/qq_45092792/article/details/97183510

版权

只写了能实现功能的部分，具体细节样式没有写完整

代码如下

在表单（一）的基础上进行修改，列表上边的按钮实现类似选项卡的效果，只写了能实现功能的部分，具体细节样式没有写完整

代码如下

<!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}}&l

最低0.47元/天解锁文章

joker.ma

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-案例-todolist（二）

只写了能实现功能的部分，具体细节样式没有写完整代码如下在表单（一）的基础上进行修改，列表上边的按钮实现类似选项卡的效果，只写了能实现功能的部分，具体细节样式没有写完整代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <me...
复制链接

扫一扫