网页设计--第六次课后作业

已于 2024-01-01 21:59:06 修改
阅读量367 收藏 7
点赞数 10
文章标签： vue.js 前端 javascript
于 2024-01-01 21:54:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_79602950/article/details/135327142
版权
文章介绍了如何使用Vue.js在HTML中创建动态表格，包括数据绑定、条件渲染（v-if/v-else-if）、以及指令如v-bind:href、v-model和v-on:click的应用。展示了书籍列表的展示和用户信息的动态显示。
摘要由CSDN通过智能技术生成

表格设计

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第六次作业</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <table border="1" cellspacing="1"  width="60%">
            <tr>
                <th>编号</th>
                <th>作者</th>
                <th>书名</th>
                <th>价格</th>
                <th>出版日期</th>
                <th>评价</th>
            </tr>

            <tr aligned="center" v-for="(book, index) in books" >
                <td>{{index+1}}</td>
                <td>{{book.author}}
                    <span v-if="gender==1">(女)</span>
                    <span v-if="gender==2">(男)</span>
                </td>
                <td>{{book.name}}</td>
                <td>{{book.price}}</td>
                <td>{{book.time}}</td>
                <td>
                    <span v-if="price>=30">有点小贵</span>
                    <span v-else="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"
                    }
 
                ]
            }
    })
</script>
</html>

vue练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>概述</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message">
        {{message}}        //插值表达式
    </div>
</body>
<script>
    new Vue({
        el:"#app",//vue接管的区域
        data:{
            message:"hello vue"
        }
    })
</script>
</html>

​
​​​​<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用指令</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <a v-bind:href="url">链接一</a>
        <a :href="url">链接二</a>
        <input type="text" v-model="url">
        <input type="button" value="点我一下"v-on:click="handle()">
        <input type="button" value="点我一下"@click="handle()">
        <br><br>

        年龄<input type="text"v-model="age">经判定,为：
        <span v-if="age<=35">年轻人(35以下)</span>
        <span v-if="age>35&&age<=60">中年人(35-60)</span>
        <span v-if="age>60">老年人(60及以上)</span>
        <br><br>

        年龄<input type="text"v-model="age">经判定,为：
        <span v-show="age<=35">年轻人(35以下)</span>
        <span v-show="age>35&&age<=60">中年人(35-60)</span>
        <span v-show="age>60">老年人(60及以上)</span>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            url:"https://www.baidu.com",
            age:20
        },
        methods: {
            handle:function(){
                alert("你点我了一下");
            }
        },
    })
</script>
</html>

​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>指令案例</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 aligned="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-else-if="user.gender==2">女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="score>=85">优秀</span>
                    <span v-else-if="score>=60 && score<85">及格</span>
                    <span style="color:cadetblue;" v-else>不及格</span>
                </td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
        el: "#app",  
        data:{
            users:[{
                name:"tom",
                age:20,
                gender:1,
                score:78
            },{
                name:"rose",
                age:18,
                gender:2,
                score:86
            },{
                name:"jerry",
                age:26,
                gender:1,
                score:90
            },{
                name:"tony",
                age:30,
                gender:1,
                score:52
            }]
        }
    })
</script>
</html>

 

DZY--小小的世界
关注
  • 10
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小甲鱼鱼c论坛python作业-全套55讲鱼C论坛小甲鱼Python课后题试题.doc
06-11
【小甲鱼鱼C论坛Python作业-全套55讲】是针对初学者设计的一套全面的Python编程学习资源，旨在帮助学员系统性地掌握Python语言基础及应用技能。这套课程覆盖了从Python语法基础到实际项目开发的诸多知识点，通过55个...
第三天课后作业练习的练习答案展示
02-26
在这个“第三天课后作业练习”的场景中，我们可能涉及到一系列关于HTML的知识点，包括但不限于以下内容： 1. HTML基础结构：一个基本的HTML文件通常包含`<!DOCTYPE html>`声明，指示浏览器使用哪种HTML版本来解析...
java程序设计【基于JDK6和NetBeans实现】宋波主编-课后作业答案-打印版.doc
09-30
【Java程序设计基础】 Java程序设计是开发基于Java平台的应用程序的过程，主要涉及JDK（Java Development Kit）的使用和编程环境的配置。在本案例中，提到了JDK6，这是Java的一个早期版本，提供了Java编译器、Java...
第四天课后作业练习的练习答案展示
02-26
作为第四天课后作业的练习答案展示，我们将通过解析标签、元素和属性，揭示HTML的强大功能及其在创建动态和交互式网页中的核心作用。 HTML是由一系列标签组成的，这些标签告诉浏览器如何呈现页面上的内容。例如，`...
01:第一课后的作业
03-08
在"01:第一课后的作业"中，可能涵盖以下几个关键知识点： 1. HTML基本结构：了解一个基本的HTML文档是如何构成的，包括<!DOCTYPE html>声明、元素（文档根元素）、元素（包含元数据如标题）和元素（显示页面内容）...
vue详解
m0_46702681的博客
07-08 1144
指令:HTML标签上带有 v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能常用指令:v-for 列表渲染，遍历容器的元素或者对象的属性v-bind 为HTML标签绑定属性值，如设置 href，css样式等v-if/y-else-if/v-else 条件性的渲染某元素，判定为true时渲染，否则不渲染v-show 根据条件展示某元素，区别在于切换的是display属性的值。
基于若依的文件上传、下载
谁说自己不可以
07-06 1088
基于若依的文件上传、下载、详细步骤。
【vueUse库Reactivity模块各函数简介及使用方法--下篇】
xiejunlan的博客
07-11 707
vueUseReactivity函数构想中的refWithControl函数可能的实现方式总结2. syncRef构想中的syncRef函数可能的实现方式注意事项总结3.syncRefs构想中的syncRefs函数可能的实现方式注意事项总结假想的toReactive函数注意事项假设的toReactive函数实现结论5.toReftoRef函数介绍使用方法示例代码总结6.toRefstoRefs函数介绍使用方法示例代码总结7.toValue使用 Vue 3 自身的 API示例使用 vueUse 的类似功能。
Vue的学习之class与style绑定
人生苦短
07-07 266
本节对class与style的绑定内容就学习完毕了！
vue+lodop实现web端打印功能
chensi_07的博客
07-11 148
安装包中的html文件为打印实例，点击其中一个用浏览器打开，点击红框如果出现下图弹窗，说明插件安装成功了。然后安装云打印插件：CLodop_Setup_for_Win32NT.exe；32位系统安装：install_lodop32.exe；64位系统安装：install_lodop64.exe；
Vue的学习之数据与方法
人生苦短
07-06 521
前段期间，由于入职原因没有学习，现在已经正式入职啦，接下来继续加油学习。
Vue 3集成krpano 全景图展示
Mr丶GUO
07-06 425
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
CSS特效：pointer-events: none；的一种特殊应用
最新发布
q1003675852的博客
07-11 292
本文记录了pointer-events: none;的一种特殊应用，既能显示模糊渐变的同时还能保持元素可点击的效果。
vue vite+three在线编辑模型导入导出
regretTAT的博客
07-10 334
要实现一个类似于数字孪生的场景 可以在线、新增、删除模型 、以及编辑模型的颜色、长宽高 然后还要实现 编辑完后 保存为json数据 记录模型数据 既可以导入也可以导出
Vue笔记12-新的组件
王劭阳的博客
07-07 334
是一个内置组件，用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成，并可以在等待时渲染一个加载状态，需要结合异步依赖，才能看到效果。在Vue3中，可以没有div根标签，如果没有的话，Vue3会将多个标签包装在一个。在Vue2中，template标签内，必须有一个div标签，作为根标签。是一个内置组件，可以将一个组件内部的模板传送到该组件DOM外部的位置去。
vue3 路由跳转新页面并传递参数与获取参数
Anlittlecat的博客
07-10 180
parmas的形式传参需在路由处定义。
Vue.js学习笔记（五）抽奖组件封装——转盘抽奖
summer_gf的博客
07-11 256
动态配置转盘组件开发，只需要改动数据，就自动生成转盘，减少UI和前端的工作量。
vue-tabs标签页引入其他页面
zw899004的专栏
07-06 439
vue-tabs标签页引入其他页面
Vue 与 OpenAI 接口交互实战：发送请求的全流程解析（一）
舜意的博客
07-07 537
这篇文章主要讲解了如何在项目中与 OpenAI 的 API 进行交互通过API的调用可以为我们的项目提供更强大的功能和交互能力相信看到这里的你一定能够有所收获的，赶紧动手将你的项目也结合AI实现智能化吧！！！
网页设计第六章的课后作业
03-27
1. 什么是响应式设计？为什么它很重要？ 响应式设计指的是能够自适应不同设备和屏幕尺寸的网站设计。它很重要，因为现在人们使用各种设备来浏览网站，包括电脑、平板电脑、智能手机等等，如果网站不能自适应屏幕...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值