网页设计——第六次课后作业+Vue练习

最新推荐文章于 2024-06-17 09:43:54 发布
最新推荐文章于 2024-06-17 09:43:54 发布
阅读量274 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hinxx/article/details/134882890
版权

作业：

 

<!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>Vue作业</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>作者</th>
                <th>书名</th>
                <th>价格</th>
                <th>出版日期</th>
                <th>评价</th>
            </tr>
            <tr align="center" v-for="(books,index) in books">
                <td>{{index + 1}}</td>
                <td>{{books.author}}
                    <span v-if="books.gender == 2">(男)</span>
                    <span v-if="books.gender == 1">(女)</span>
                </td>
                <td>{{books.name}}</td>
                <td>{{books.price}}</td>
                <td>{{books.time}}</td>
                <td>
                    <span v-if="books.price >30">有点小贵</span>
                    <span v-else-if="books.price <= 30">价格亲民</span>
                </td>
            </tr>
        </table>
    </div>
    </body>
    <script>
        new Vue({
            el:"#app",
            data:{
                books:[{
                    id:"1",
                    author:"小华",
                    gender:1,
                    name:"《春天来了》",
                    price:23,
                    time:"1998-03-12"
                },{
                    id:"2",
                    author:"老舍",
                    gender:2,
                    name:"《济南的冬天》",
                    price:32,
                    time:"1956-12-09"
                },{
                    id:"3",
                    author:"朱自清",
                    gender:2,
                    name:"《背影》",
                    price:40,
                    time:"1943-09-12"
                }]
            },
            methods: {
                
            },
        })
    </script>
</html>

 练习：

 

 

 

 

<!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>Vue-指令-案例</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        <div id="app">
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>
            <tr align="center" v-for="(user,index) in users">
                <td>{{index + 1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span v-if="user.gender == 1">男</span>
                    <span v-if="user.gender == 2">女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score >= 85">优秀</span>
                    <span v-else-if="user.score >= 60">及格</span>
                    <span style="color: red;" v-else>不及格</span>
                </td>
            </tr>
        </table>
    </div>
    </body>
    <script>
        new Vue({
            el:"#app",
            data:{
                users:[{
                    name:"Tom",
                    age:20,
                    gender:1,
                    score:18
                },{
                    name:"Rose",
                    age:18,
                    gender:2,
                    score:86
                },{
                    name:"Jerry",
                    age:16,
                    gender:1,
                    score:90
                },{
                    name:"Tony",
                    age:30,
                    gender:1,
                    score:52
                }]
            },
            methods: {
                
            },
        })
    </script>
</html>

 

 

hinxx
关注
vue前端入门——制作一个电影网页
weixin_46265647的博客
01-22 7256
使用语言 Html5 JS css 使用框架 基于vue的前后端分离技术 movie.HTMl <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="./movie.css" /> </head> <body> <s
第七章 浮动 课后题第5题（制作彩妆热卖产品列表页面）
qq_40133235的博客
05-03 942
<section> <h1>大家都喜欢的彩妆</h1> <ul> <li> <a href="#"><span>1</span>Za姬芮新能真皙美白隔离霜 35g <div> <img src="img/icon-1.jp
Vue-做一个网页
qq_52347540的博客
09-08 2538
网页的成果图，和讲解在b站这个链接里 https://www.bilibili.com/video/BV1KM4y1G7Zk?share_medium=android&share_plat=android&share_session_id=118a759a-e227-44d1-a58c-44e8c21c6829&share_source=QQ&share_tag=s_i&timestamp=1631099611&unique_k=xYxOgX 一些展示图片，有
vue大作业-端午节主题网站
最新发布
qq_36463299的博客
06-17 693
端午节，又称为龙舟节，是中国的传统节日之一，每年农历五月初五庆祝。这个节日不仅是纪念古代爱国诗人屈原的日子，也是家人团聚、共享美食的时刻。今天，我们非常高兴地分享一个以端午节为主题的网站，旨在通过现代化的网络技术，传承和展示这一悠久的文化传统。
vue制作一个好看的网页
m0_70965903的博客
12-12 7546
vue 模板的使用
Vue作业:计算器页面制作
Arciab的博客
04-02 570
但也有不好的地方，如果在计算属性方法中执行大量的耗时操作，则可能会带来一些性能问题。例如，在计算属性循环一个大的数组以执行很多操作，那么当频繁调用该计算属性时，就会导致大量不必要的运算。定义一个计算属性，实现结果同步自动更新。通过if判断语句运行不同操作符的语句，来输出不同操作符所得到的结果。计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的DOM部分也会同步自动更新。通过选择标签可以选择不同的操作符，并通过v-model与之data中的opt绑定来改变不同操作符。
【Vue】使用vue框架制作一个简单的网页
热门推荐
YIZHILIUSHA2020的博客
10-22 2万+
参考代码(主要参考了样式)：link 本文代码地址(Gitee)：link 项目内容主要包括header+轮播图+背景音乐+人物介绍卡片+时间线+视频集+长引用+时间显示+footer 注意：由于本项目采用了组件化所以且style里没加scoped，所以不同组件之间的样式可以共用。 网页具体如下GIF所示： ......
使用Vue制作推箱子网页
m0_69172645的博客
05-25 505
四，Vue代码，用if判断语句来设置上下左右边界和墙壁的上下左右边界，通过判断使箱子移动，最后给整个页面添加事件监听。一，首先创建一个项目，并引入Vue组件。三，编写样式文件，添加背景图片。五，完整代码及效果展示。
第二版-系统架构设计师-课后习题-无答案练习册
04-12
通过对《第二版-系统架构设计师-课后习题-无答案练习册》的内容分析，我们可以看到系统架构设计不仅涉及理论知识的学习，还需要通过实践不断积累经验。本书通过一系列习题帮助读者巩固所学知识，提升解决实际问题的...
Java 学习路线大全，再也不用迷路啦（持续更新）
腾讯全栈-ITCJF
10-14 2757
路线特点 最新，完整一条龙，从入门到入土（⭐ 表示推荐学习） 给出目标、学习建议、关键知识点、最优资源以及各类资源推荐（视频、书籍、文档、项目、工具等） 划分阶段、更有计划，且在最后给出持续学习的方向、探索 Java 程序员发展的无限可能 前言 首先呢，我们要了解 Java 的应用场景和就业方向，看看和自己的学习目的是否一致，目前，Java 的岗位需求多，是后台开发的主流编程语言，功能强大，还是很值得学习的。 阶段 1：Java 入门 目标 培养兴趣、快速上手 前期准备 准备好一款在线、随时随地
python用函数编写数字金字塔1、121、12321_Python正课目录
weixin_39825105的博客
12-10 2618
本文内容皆为作者原创，如需转载，请注明出处：https://www.cnblogs.com/xuexianqi/p/12515420.htmlTOP：Python2.7+3.8+PyCharm2019.3.3安装Python安装1 —— Python3.8的安装Python安装2 —— Pycharm2019.3.3的安装Python安装3 —— Python3.8和2.7共存PyCharm202...
「需求广场」需求词更新明细（三）
csdndownload01的博客
05-18 3930
本期共更新需求词641个，全量展示供各位上传者参考。
【VUE】vue网站设计-----vue官网设计
coding加油站
08-20 8108
vue作业，vue课程设计，vue学习，课程期末作业
使用vue组件搭建网页应用
Cliff Rhine的博客
03-23 1万+
使用vue组件搭建网页应用
vue搭建自己的第一个网页
H-rosy的博客
05-02 508
当我们学会了如何初始化一个项目后，现在我们再来讲一下如何自己构建一个简单的页面。这些也是我正在学习的地方，于是就是简单的记录一下，有一些错误或者你觉得这个浪费时间那真的抱歉哈。 项目目录介绍： 在我这两天的学习中，我觉得去官网仔细阅读一下官方文档是十分有必要的，不要担心看不懂，那你只需要把网页翻译成为中文就好啦。官方网址 建立项目： 我们刚刚接触一般是将.vue文件建立在comment目录里面，在里面可以建立一个.vue文件，这里面默认会有一个HelloWorld.vue文件，你可以自己新建一个.
vue编写一个简易网站_一个用Vue编写的简单的井字游戏
cuk5239的博客
07-30 1084
vue编写一个简易网站 井字游戏 (Tic-Tac-Vue) Tic-Tac-Vue is a simple JavaScript Single Page Application (SPA) written with Vue, Vuex and Vue Router. Its goal is to be a "case study" for beginners who want to learn ...
【vue作业】糕点商城网站-vue设计
coding加油站
08-14 6824
糕点网站，糕点商城，vue网站，vue糕点，vue大作业，vue期末作业，vue基础
使用Vue制作小说网站
qq_55299191的博客
09-27 247
2、使用数据接口将数据渲染到页面。3、网站的功能模块不能低于3个.1、实现搜索功能，模糊查询。
【vue作业】vue实现海贼王网页介绍--动漫网站设计
coding加油站
08-10 2180
vue，vue海贼王，海贼王网页设计，vue网页设计
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值