Vue基础案例

于 2022-09-08 15:34:53 发布
阅读量435 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45387575/article/details/126735390
版权

1、电影列表，点击谁谁就加粗

Vue中样式的动态绑定，使用currentindex（自己添加）。一般进行遍历的时候都会用到item 和index

    <style>
        .bold {
            font-weight: 900
        }
    </style>
</head>

<body>
    <div id="app">
        <ul v-for="(item,index) in movies">
            <li :class="{bold:index==curentindex}" @click="cli(index)"> {{item}}</li>
        </ul>
    </div>
    <script src="/demo3_824/js文件/vue.js"></script>
    <script>
        let data = {
            movies: ['电影1', '电影2', '电影3', '电影4'],
            curentindex: ''
        }
        const app = new Vue({
            el: '#app',
            data: data,
            methods: {
                cli(index) {
                    this.curentindex = index
                }
            }
        })
    </script>
</body>

 2、购物车

需求：点击增加或减少，删除完显示购物车为空。

 

 


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>

<body>
    <div id="app">
        <div v-show="items.length>0">
            <table class="table table-striped table-bordered table-hover  table-condensed">
                <thead>
                    <th>商品编号</th>
                    <th>商品名称</th>
                    <th>商品单价</th>
                    <th>商品数量</th>
                    <th>商品总价</th>
                    <th>商品操作</th>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in items">
                        <td>{{index+1}}</td>
                        <td>
                            {{item.name}}
                        </td>
                        <td>
                            {{item.price}}
                        </td>
                        <td>
                            <button @click="decre(index)" :disabled="item.number<=0">-</button> {{item.number}} <button @click="incre(index)">+</button>
                        </td>
                        <td>
                            {{totalprice(index)}}
                        </td>
                        <td><button @click="del(index)">删除</button></td>
                    </tr>
                </tbody>
            </table>
            <h4>合计：{{Price}}</h4>
        </div>
        <div v-show="items.length<=0">购物车为空</div>
    </div>
    <script src="/demo3_824/js文件/vue.js"></script>
    <script>
        let data = {
            items: [{
                name: '苹果',
                price: 20,
                number: 1,
                totoalprice: 0
            }, {
                name: '香蕉',
                price: 13,
                number: 1,
                totoalprice: 0
            }, {
                name: '哈密瓜',
                price: 50,
                number: 1,
                totoalprice: 0
            }]
        }
        const app = new Vue({
            el: '#app',
            data: data,
            //商品总价部分的数据处理
            computed: {
                Price() {
                    let result = 0
                    for (i = 0; i < this.items.length; i++) {
                        result += this.items[i].price * this.items[i].number
                    }
                    return '￥' + result.toFixed(2)
                }
            },
            methods: {
                totalprice(index) {
                    this.items[index].totoalprice = this.items[index].price * this.items[index].number
                    return this.items[index].totoalprice
                },
                decre(index) {
                    this.items[index].number--
                },
                incre(index) {
                    this.items[index].number++
                },
                del(index) {
                    this.items.splice(index, 1)
                }
            }
        })
    </script>
</body>

</html>

三、todolist

 参考：Vue案例之todoLIst实现 - 小小的少年 - 博客园 (cnblogs.com)

   <style>
        .do {
            text-decoration: line-through;
        }
        
        .div1 {
            width: 400px;
            height: 100px;
            border-style: dashed;
            margin-bottom: 50px;
        }
        
        .div2 {
            width: 500px;
            border-style: dashed
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="div1">
            <h2>新增</h2>
            <input type="text" v-model="willdoing"><span>&nbsp;</span><button @click="add">添加</button>
        </div>

        <div>
            <div class="div2" v-show="listshow[0]">
                <!-- 所有任务列表 -->
                <h2>所有任务列表</h2>
                <ul>
                    <li v-for="(item,index) in listwill" @click="ido(index)" :class="{do:item.cur}">
                        {{item.name}}
                    </li>
                </ul>
            </div>
            <!-- 已经完成的任务列表 -->
            <div class="div2" v-show="listshow[1]">
                <h2>完成任务列表</h2>
                <ul>
                    <li v-for="(item,index) in listdone">
                        {{item.name}}
                    </li>
                </ul>
            </div>
            <!-- 未完成的任务列表 -->
            <div class="div2" v-show="listshow[2]">
                <h2>未完成任务列表</h2>
                <ul>
                    <li v-for="(item,index) in listless">
                        {{item.name}}
                    </li>
                </ul>
            </div>
        </div>

        <div class="div3">
            操作：<button @click="btn1(0)">所有</button><span>&nbsp;</span><button @click="btn1(1)">完成</button><span>&nbsp;</span><button @click="btn1(2)">未完成</button>
        </div>
    </div>
    <script src="/demo3_824/js文件/vue.js"></script>
    <script>
        let data = {
            // listwill是数组，里面存放了一个个的对象，包括任务名称属性，和是否完成属性
            listwill: [], //所有的任务列表
            willdoing: ' ',
            done: '',
            cur: '',
            //已经完成的任务列表
            listdone: [],
            //未完成的任务列表
            listless: [],
            //存放显示界面
            listshow: [false, false, false]
        }
        const app = new Vue({
            el: '#app',
            data: data,
            computed: {

            },
            methods: {
                //1、添加计划进去
                add() {
                    if (this.willdoing.trim() != '') {
                        let obj = {
                            name: this.willdoing,
                            cur: false
                        }
                        this.listwill.push(obj)
                        this.listless.push(obj)
                        this.willdoing = ""
                        this.listshow = [false, false, false]
                        this.listshow[0] = true
                    } else {
                        alert('请输入..')
                    }
                },
                //添加点击时间，点击后，文字划伤中线
                ido(index) {
                    if (this.listless.length > 0) {
                        console.log(2);
                        this.listwill[index].cur = true
                        this.listdone.push(this.listwill[index])
                        console.log(this.listwill[index]);
                        this.listless.splice(this.listless.indexOf(this.listwill[index]), 1)
                            //当所有的任务完成时，所有的操作就没有
                    }
                    if (this.listless.length == 0) {}
                },
                btn1(index) {
                    this.listshow = [false, false, false]
                    this.listshow[index] = true
                }
            }
        })
    </script>
</body>

</html>

v-model添加代办事项：

push（）方法：想数组末尾添加元素

四、图书管理

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <style>
        .red {
            color: red
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <button @click="showpage(0)">全部</button>
            <button @click="showpage(1)">已借阅</button>
            <button @click="showpage(2)">未借阅</button> 总计{{totalbooks.length}}本，已借阅{{donebooks.length}},当前可借阅{{ingbooks.length}}本
        </div>
        <table class="table">
            <thead>
                <th>序号</th>
                <th>图书名称</th>
                <th>图书作者</th>
                <th>图书价格</th>
                <th>图书出版社</th>
                <th>图书状态</th>
                <th>图书操作</th>
            </thead>
            <!-- 全部书籍页面 -->
            <tbody v-show="pageshow[0]">
                <tr v-for="(item,index) in totalbooks">
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.author}}</td>
                    <td>{{item.price}}</td>
                    <td>{{item.published}}</td>
                    <td v-bind:class='{red:item.status=="已借阅"}'>{{item.status}}</td>
                    <td><button @click="dothis(index)">{{item.cando}}</button></td>
                </tr>
            </tbody>
            <!-- 已借阅书籍页面 -->
            <tbody v-show="pageshow[1]">
                <tr v-for="(item,index) in donebooks">
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.author}}</td>
                    <td>{{item.price}}</td>
                    <td>{{item.published}}</td>
                    <td v-bind:class='{red:item.status=="已借阅"}'>{{item.status}}</td>
                    <td><button @click="dothis1(index)">{{item.cando}}</button></td>
                </tr>
            </tbody>
            <!-- 未借阅书籍页面 -->
            <tbody v-show="pageshow[2]">
                <tr v-for="(item,index) in ingbooks">
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.author}}</td>
                    <td>{{item.price}}</td>
                    <td>{{item.published}}</td>
                    <td v-bind:class='{red:item.status=="已借阅"}'>{{item.status}}</td>
                    <td><button @click="dothis2(index)">{{item.cando}}</button></td>
                </tr>
            </tbody>
        </table>
        </table>
    </div>
    <script src="/demo3_824/js文件/vue.js">
    </script>
    <script src="图书管理.js"></script>
</body>

</html>
let data = {
    //存储图书信息
    totalbooks: [{
        name: 'JS程序设计',
        author: '小明',
        price: 99,
        published: '机械工业出版社',
        status: '未借阅',
        cando: '借阅'
    }, {
        name: 'JS程序设计',
        author: '小明',
        price: 78,
        published: '机械工业出版社',
        status: '未借阅',
        cando: '借阅'
    }, {
        name: 'JS程序设计',
        author: '小明',
        price: 49,
        published: '机械工业出版社',
        status: '未借阅',
        cando: '借阅'
    }, {
        name: 'JS程序设计',
        author: '小明',
        price: 39,
        published: '机械工业出版社',
        status: '未借阅',
        cando: '借阅'
    }],
    pageshow: [true, false, false]
}
const app = new Vue({
    el: '#app',
    data: data,
    computed: {
        //未借阅课本
        ingbooks() {
            let obj = []
            obj = this.totalbooks.slice()
            return obj
        },
        donebooks() {
            let obj = []
            for (let i = 0; i < this.ingbooks.length; i++) {
                if (!this.totalbooks.includes(this.ingbooks[i])) {
                    obj.push(this.ingbooks[i])
                        // 一定要注意使用splice方法会修改原数组
                }
            }
            return obj
        }
    },
    methods: {
        dothis(index) {
            //借阅书籍
            if (this.totalbooks[index].status == '未借阅') {

                //1、更改书籍状态
                this.totalbooks[index].status = '已借阅'
                this.totalbooks[index].cando = '归还'
                    //修改已借阅书籍
                this.donebooks.push(this.totalbooks[index])
                    //修改未借阅的书籍
                this.ingbooks.splice(this.ingbooks.indexOf(this.totalbooks[index]), 1)
                    //归还书籍
            } else if (this.totalbooks[index].status == '已借阅') {

                this.totalbooks[index].status = '未借阅'
                this.totalbooks[index].cando = '借阅'
                    //修改已借阅书籍
                this.donebooks.splice(this.donebooks.indexOf(this.totalbooks[index]), 1)
                    //修改未借阅的书籍
                this.ingbooks.push(this.totalbooks[index])

            }
        },
        showpage(inde) {
            this.pageshow = [false, false, false]
            this.pageshow[inde] = true
        },
        dothis1(index) {
            this.donebooks[index].status = '未借阅'
            this.donebooks[index].cando = '借阅'
            this.ingbooks.push(this.donebooks[index])
            this.donebooks.splice(this.donebooks.indexOf(this.donebooks[index]), 1)
        },
        dothis2(index) {
            this.ingbooks[index].status = '已借阅'
            this.ingbooks[index].cando = '归还'
            this.donebooks.push(this.ingbooks[index])
            this.ingbooks.splice(this.ingbooks.indexOf(this.ingbooks[index]), 1)
        }
    }
})

一夕ξ
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
PyQt（Python+Qt）学习随笔：QTabWidget选项卡部件当前项类属性currentIndex、currentTabText、currentTabName、currentTabIcon介绍
老猿Python
03-17 7190
老猿Python博文目录 专栏：使用PyQt开发图形界面Python应用 老猿Python博客地址 QTabWidget的当前项类属性为用于访问当前操作的选项卡，包括如下属性： 1. currentIndex当前选项的位置索引 如果没有选择当前项，currentIndex值为-1，可以通过方法currentIndex()和setCurrentIndex(int index)访问该属性。当前项...
QT5中的QTabWidget类中的currentIndex遇到的问题。
热门推荐
qq_36484196的博客
08-01 1万+
在Qt5的QTabWidget类中，在默认情况下是以0开始作为标签索引值，而currentIndex（）函数返回的值指的是 在   当前的页面切换的界面中所停留的那一个页面对应的标签索引值。...
Qt 之 PathView中currentIndex的“坑”
Captain--Jack
12-19 1万+
QT的PathView这个控件使用起来很不错，用起来简单，而且效果也不错。 但是最近发现它里面有个较为“坑”的地方，就是在使用它的onCurrentIndexchanged这个槽的时候。 比如当前的currentIndex为0，count为5，当你把它的currentIndex设置为2，这时候onCurrentIndexchanged这个槽会执行多少次呢？ 代码如下： import QtQ
Vue学习笔记（一）
1900的博客
08-06 129
一、hello Vue 安装vue，把源文件下载下来，放到工程文件夹下 在代码中引入vue <script src="../js/vue.js"></script> 案例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=.
Vue实现Tab切换
qq_42964711的博客
05-22 642
Tab切换 - 点击之后更改索引：v-on:click='change(index) 颜色变化 v-bind:class='currentIndex==index?"active":""'，active是css里的类。 图片显示：v-bind:class=‘currentIndex==index?“current”:""’，和当前索引相等的设置为block属性。 <!DOCTYPE html> <html lang="en"> <head> <meta.
vue基础todo案例
05-23
vue基础todo案例
vue基础经典案例.zip
10-21
黑马程序员vue阶段企业实战开发项目,从基础到入门vue必做项目
VUEVue基础教程、实战案例和实战项目讲解
最新发布
05-17
Vue基础教程、实战案例和实战项目讲解Vue基础教程、实战案例和实战项目讲解Vue基础教程、实战案例和实战项目讲解Vue基础教程、实战案例和实战项目讲解Vue基础教程、实战案例和实战项目讲解Vue基础教程、实战案例和...
vue基础-品牌列表案例.zip
12-28
vue基础-品牌列表案例 vue的增删
Vue 基础TODO案例分析.md
05-23
TODO案例分析.md
QT中ComboBox控件基本用法
lml521lml927的博客
08-04 1万+
1）addItems 　　void addItem(const QString &text, const QVariant &userData = QVariant()) void addItem(const QIcon &icon, const QString &text, const QVariant &userData = QVariant()) 在列表的最后一项添加一个文本内容为test选项 2）currentText 　　QString currentTex
currentIndex
weixin_43206442的博客
09-04 1076
<ul> <li v-for="(item,index) in movies" @click="changeColor(index)" :class="{active:currentIndex===index}"> {{item}}---{{index}} </li> </ul> el:'#app', data:{ movies: ['七龙珠', '柯南', '你是我的荣耀'], currentIndex: 0 , }, method
【面试题解】你了解JavaScript常用的的十个高阶函数么?
m0_48721669的博客
11-09 697
本系列面试题旨在学会相关知识点，从而轻松应对面试题的各种形式，本文讲解了 JavaScript 中的一些 高阶函数，包括参数和返回值等。 什么是高阶函数? 高阶函数是对其他函数进行操作的函数，可以将它们作为参数或返回它们。 简单来说，高阶函数是一个函数，它接收函数作为参数或将函数作为输出返回。 1.函数可以作为参数 function bar(fn){ if(typeof fn === "function"){ fn() } } //调用 bar(function () {})
Qt 基础 详细总结
Awwwze的博客
07-29 4108
文章目录Qt一、创建Qt项目1.快捷键2.命名规范二、QPushButton1.按钮控件常用API（1）创建（2）设置父亲（3）设置文本（4）设置位置（5）重新指定窗口大小（6）设置窗口标题（7）设置窗口固定大小三、对象树1. 析构问题2. 对象树四、Qt窗口坐标五、信号和槽机制（重点）1. 基本概念与函数参数解释2. 自定义信号和槽（1）代码实现（2）自定义信号和槽需要注意的事项（3）函数重载<1>当自定义信号和槽出现重载<2>按钮触发槽函数<3>信号连接信号<4
Vue商城项目笔记一
weixin_44215068的博客
05-01 937
0.开发项目流程 1、书写静态页面 2、拆分组件 3、获取服务器的数据动态展示 4、完成相应的动态业务逻辑 1.创建项目 在对应目录下使用脚手架创建项目 vue create vue_shop 创建项目后，先了解对应的目录结构 node_modules：项目依赖文件夹 public：一般放置一些静态资源（图片等），放在public文件夹中的静态资源，webpack进行打包的时候，会原封不动打包到dist文件夹中 src：源代码文件夹 ----assets：...
vue遇到的添加current失败
qq_33335751的博客
03-16 1770
做仿饿了么单页面的时候，商品部分右侧滚动，左侧对应分栏添加current，但是失败，左侧导航代码如下&lt;div class="menu-wrapper" ref="menuWrapper"&gt; &lt;ul&gt; &lt;li v-for="(item,key,index) in goods" :key="key" class="menu-item&quot
Vue使用一个index记录选择的元素并更改样式
科技向善
12-26 1171
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active { color: red; } </style> </...
onlyOffice+vue实现基础案例
06-08
只需要简单的几步就可以实现 Vue 和 OnlyOffice 的基础案例。 首先，你需要在项目中安装 OnlyOffice 的 SDK。可以使用 npm 命令进行安装： ``` npm install onlyoffice-desktopeditorsdk --save ``` 接下来，你...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一夕ξ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值