vue 案例

最新推荐文章于 2023-10-16 12:32:14 发布
最新推荐文章于 2023-10-16 12:32:14 发布
阅读量270 收藏
点赞数
分类专栏： 前端 框架 文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sicauliuy/article/details/103351161
版权

文章目录

vue 案例

Tab选项卡案例

选择对应tab标签，切换图片
在这里插入图片描述

<!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 type="text/css">
        .tab ul {
            overflow: hidden;
            padding: 0;
            margin: 0;
        }

        .tab ul li {
            box-sizing: border-box;
            padding: 0;
            float: left;
            width: 100px;
            height: 45px;
            line-height: 45px;
            list-style: none;
            text-align: center;
            border-top: 1px solid blue;
            border-right: 1px solid blue;
            cursor: pointer;
        }

        .tab ul li:first-child {
            border-left: 1px solid blue;
        }

        .tab ul li.active {
            background-color: orange;
        }

        .tab div {
            width: 500px;
            height: 300px;
            display: none;
            text-align: center;
            font-size: 30px;
            line-height: 300px;
            border: 1px solid blue;
            border-top: 0px;
        }

        .tab div.current {
            display: block;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="tab">
            <ul>
                <li v-on:click='change(index)' :class='currentIndex==index?"active":""':key="item.index" v-for="(item,index) in list">{{item.title}}</li>
            </ul>


            <div :class='currentIndex==index?"current":""' :key="item.index" v-for="(item,index) in list">
                <img :src="item.path" style="width: 200px;height: 150px;">
            </div>
        </div>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    var vm=new Vue({
        el:'#app',
        data:{
            currentIndex:0,//当前索引
            list:[
                {id:0,title:'mango',path:'./images/mango.jpg'},
                {id:1,title:'pineapp',path:'./images/pineapp.jpg'},
                {id:2,title:'strawberry',path:'./images/strawberry.jpg'}
            ]
        },
        methods: {
            change:function(index){
                //在这里实现选项卡切换操作：本质就是操作类名
                //通过currtentIndex操作类名
                this.currentIndex=index;
            }
        },
    });
</script>
</html>

图书管理案例

在这里插入图片描述
实现功能：添加图书，删除图书，编辑（点击编辑，图书信息会自动填充到提交栏），实时显示图书总数，时间格式过滤器。

<!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>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .grid {
            margin: auto;
            width: 500px;
            text-align: center;
        }

        .grid table {
            width: 100%;
            /* collapse:边框合并为单一的边框
                separate：边框不合并，不会忽略 border-spacing 和 empty-cells 属性
             */
            border-collapse: collapse;
        }

        .grid th,
        td {
            padding: 10px;
            border: 1px dashed orange;
            height: 35px;
            line-height: 35px;
        }

        .grid th {
            background-color: orange;
        }

        .grid .book {
            padding-bottom: 10px;
            padding-top: 5px;
            background-color: #F3DCAB;
        }

        .grid .total {
            height: 30px;
            line-height: 30px;
            background-color: #F3DCAB;
            border-top: 1px solid;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="grid">
            <div class="grid">
                <div>
                    <h1>图书管理</h1>
                    <div class="book">
                        <div>
                            <label for="id">编号</label>
                            <input type="text" id="id" v-model="id" :disabled="flag" v-focus>
                            <label for="name">名称</label>
                            <input type="text" id="name" v-model="name">
                            <button @click="handle" :disabled="submitFlag">提交</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="total">
                <span>图书总数：</span>
                <span>{{total}}</span>
            </div>
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr :key="item.id" v-for="(item,index) in list">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.time|dateFormat("yyyy-mm-dd hh:mm:ss")}}</td>
                        <td>
                            <a href="" @click.prevent="toEdit(item.id)">编辑</a>
                            <span>|</span>
                            <a href="" @click.prevent="deleteBook(item.id)">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>


    <script>

        Vue.directive('focus', {
            //el参数，是一个原生的JS对象
            inserted: function (el) {//在插入DOM时会执行一次
                el.focus()

                //Js行为相关的都在inserted中设置
            }
        })

        var vm = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                flag: false,//标记图书id是否可编辑
                submitFlag:false,
                list: [
                    { id: 1, name: '西游记', time: 2525609975000 },
                    { id: 2, name: '红楼梦', time: 2525609975000 },
                    { id: 3, name: '水浒传', time: 2525609975000 },
                    { id: 4, name: '三国演义', time: 2525609975000 }
                ]
            },
            methods: {
                handle: function () {
                    if (this.flag) {
                        //编辑，根据图书id查询图书，并修改
                        var book = this.list.some((item) => {
                            if (item.id == this.id) {
                                //更新图书信息
                                item.name = this.name;
                                return true;
                            }
                        });
                        this.flag = false;
                    } else {
                        //提交
                        var book = {};
                        book.id = this.id;
                        book.name = this.name;
                        var day = new Date();
                        book.time = parseInt(new Date().getTime());
                        console.log(book.time);
                        //向数组中添加新增图书
                        this.list.push(book);
                    }


                    //清空输入栏
                    this.id = '';
                    this.name = '';
                },
                toEdit: function (id) {
                    //标记图书id不可被编辑
                    this.flag = true;
                    //根据id，查询list数组中的对应图书,返回一个新的数组
                    var books = this.list.filter(function (item) {
                        return item.id == id;
                    });
                    //把查询的图书信息添加到添加栏中
                    this.id = books[0].id;
                    this.name = books[0].name;
                },
                deleteBook: function (id) {
                    //删除图书
                    //根据图书id查询该图书在数组中的索引
                    var index = this.list.findIndex(function (item) {
                        return item.id == id;
                    });

                    //根据索引删除元素
                    //方法一
                    //this.list.splice(index,1);

                    //方法二
                    this.list = this.list.filter(function (item) {
                        return item.id != id;
                    });
                }
            },
            computed: {
                total: function () {
                    return this.list.length;
                }
            },
            filters: {//私有过滤器
                dateFormat: function (dateStr, pattern = '') {
                    //根据给定的时间字符串，得到特定的时间
                    var dt = new Date(dateStr);

                    //提取年月日
                    var y = dt.getFullYear();
                    var m = dt.getMonth() + 1;//月份从0开始
                    var d = dt.getDate();

                    if (pattern.toLocaleLowerCase() == 'yyyy-mm-dd') {
                        return `${y}-${m}-${d}`;
                    } else {
                        //最全时间格式
                        var hh = dt.getHours();
                        var mm = dt.getMinutes();
                        var ss = dt.getSeconds();
                        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
                    }
                }
            },
            watch:{
                name:function(val){
                    var flag=this.list.some(function(item){
                        return item.name==val;
                    });
                    if(flag){
                        this.submitFlag=true;
                    }else{
                        this.submitFlag=false;
                    }
                }
            }

        })
    </script>
</body>

</html>
站在风口的猪猪侠
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue学习笔记
whitepine的博客
08-11 124
VUE侦听器watch的学习记录学习vue的过程语法和注意点功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 记录学习v...
Vue change事件、click点击事件，传参数时保持默认的参数
树上骑个猴的博客
12-15 3258
想要保存事件回调函数原有的参数，在触发事件是添加"$event"参数。 <input type="text" v-model="item.count" @change="updateNumber($event,index)" /> //更新 val为原有的参数，当input的值改变时触发。 index为传入的下标。 updateNumber(val, index) { console.log(val, index); }, ...
Vue3中的pinia使用（收藏版）
weixin_57677300的博客
12-08 1万+
pinia官方文档Pinia 的优点更多查看文档… 在main.js中引入pinia并创建容器挂载到根实例上 创建stores文件夹和index.js文件（这个文件以后基本不用管了） 在stores文件夹下创建counter.js文件。这个文件就是存有关counter相关的数据。（类似vuex的模块化） defineStore 是需要传参数的， 然后再组件中使用： 运行效果： 可以用vue3的调试工具看pinia案例需求，点击按钮加一： 一个不解构，一个不解构看看区别。 运行结
VUE入门+5个小案例
热门推荐
Beyondczn的博客
02-23 3万+
本文是我心血来潮学习Vue框架所做的笔记，也供童鞋们学习参考。作为后端的开发人员，学习前端的Vue框架只是单纯地去了解下前端框架的内容，所以并没有深入地去学习，因此本文只适合Vue入门的童鞋哦。由于我的能力有限，所写的内容可能有错误，小伙伴们可以在评论区中进行讨论。这篇笔记是根据哔哩哔哩大学中黑马程序员up主的视频内容进行记录的。视频地址：前端基础必会教程-4个小时带你快速入门vue，欢迎童鞋们去三连哦。 一、Vue基础 1.第一个Vue程序 步骤： 引入vue开发环境 <script sr.
Vue 实例
顺其自然~专栏
09-27 5854
创建一个 Vue 实例 每个 Vue 应用都是通过用Vue函数创建一个新的Vue 实例开始的： var vm = new Vue({ // 选项 }) 虽然没有完全遵循MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用vm(ViewModel 的缩写) 这个变量名表示 Vue 实例。 当创建一个 Vue 实例时，你可以传入一个选项对象。这篇教程主要描述的就是如何使用这些选项来创建你想要的行为。作为参考，你也可以在API 文档中浏览完整的选项列表。 ...
vue案例练习
08-10
vue案例练习
vue案例代码 vue案例代码
11-22
vue案例代码
SpringBoot + Vue 案例实战完整代码（第一版）
07-01
springboot__spring__springmvc__mybatis__vue
前端Vue案例需求文檔
08-12
給自己看的前端需求
SpringBoot + Vue 案例实战完整代码（第二版）
07-01
springboot__spring__springmvc__mybatis__vue__md5__druid__redis__logback__transaction
Vue简单练手案例
A_Common_Man的博客
05-05 4331
适合vue初学者的3个练手小案例，加深对数据驱动视图的理解，体会到与原生js直接操纵Dom节点的区别
vue项目案例（Vue3）
u013083465的专栏
05-30 7197
VUE3 + vite 案例
120.《vue3.0 最全详细总结+案例》
qq_44864082的博客
12-26 1万+
文章目录一、创建Vue3.0工程1.使用 vue-cli 创建2.使用 vite 创建二.常用 Composition API1.ref函数2.reactive函数3.vue2.0响应式原理4.vue3的响应式原理5.reactive 和 ref 区别6. setup的注意点7.计算属性与监听器1.computed2.watch3.watchEffect函数8.vue3 生命周期9.自定义hook函数10.toRef 和 toRefs1.toRef2.toRefs三.其它 Composition API01
Vue简单入门及案例
qq_54605990的博客
04-27 1757
VUE入门 简介： JavaScript框架 简化Dom操作 响应式数据驱动 之前基于DOM----->（1）获取DOM元素 （2）操作DOM元素 Vue官网： https://cn.vuejs.org Vue.js的优点 体积小 压缩后33K 更高的运行效率 基于虚拟dom，一种可以与预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM 双向数据绑定 让开发者不用再去操作D
vue项目开发实战案例
代上老码的专栏
07-22 2万+
今天分享一些vue基础实战例子 实例1: 渲染声明 渲染声明是 vue 的最核心模块。 vue 基于传统的 HTML 模板语法，将 DOM 绑定到 vue 实例上，然后 vue 在底层的实现上，将 模板编译成虚拟 DOM 渲染函数(render function)。 <!DOCTYPE html> <html lang="en"> <head> &lt...
Vue - 快速入门，这一套就够了！（Vue core + 案例 + 效果演示）
最新发布
CYK_byte的博客
10-16 6270
前置条件：掌握 HTML、CSS、JavaScript、AJAX.工具：VsCode.插件：Live Server（浏览器实时预览）Ps：建议都提前下载下来，没网的时候也能用.
vue基础案例
qq_43420617的博客
03-25 2726
文章目录后台管理案例一、安装和配置路由二、基于路由渲染登录组件三、模拟登录功能四、后台主页基础布局五、退出登录并控制访问权限六、子路由嵌套显示七、点击进入用户详情页八、升级用户详情页的路由路由path的注意点扩展：控制页面的权限黑马头条一、 初始化① 创建并梳理项目结构② 安装和配置Vant组件③ 使用Tabber组件⑤ 使用Navbar组件⑥ 覆盖Navbar的默认样式二、文章列表①. 文章列表数据请求方式请求根路径请求URL 地址查询参数响应的数据结构返回参数说明② 封装ut
VUE简介及简单应用案例
言兼小师傅的博客
08-08 1322
Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。后端的框架Mybatis，Mybatis是用来简化jdbc代码编写的；而VUE是前端的框架，是用来简化JavaScript代码编写的。
Vue案例
SunsetGirl的博客
06-28 953
三个目前掌握Vue知识的小案例
webRTC vue案例
04-05
下面是一个简单的WebRTC Vue案例： 1. 安装Vue和WebRTC相关的库 ``` npm install vue webrtc-adapter vue-webrtc ``` 2. 在Vue组件中引入WebRTC组件 ```html <video ref="localVideo" autoplay muted></...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值