Vue作业(实现比较数字大小，实现导航栏)

1、比较数字大小

    <div id="app"><input type="number" v-model:value="count01"><span>{{jugle}}</span><input type="number" v-model="count02"></div><script>var vm=new Vue({el: '#app',data:{count01:0,count02:0,},computed:{jugle(){if(this.count01>this.count02){return '>'}else if(this.count01<this.count02){return '<'}else{return '='}              }}})</script>

实现效果：

2、导航栏

css部分

    <style>div{margin: 0;padding: 0;}ul{font-size: 0;text-align: center;list-style: none;}li{padding: 30px;width: 70px;background-color: rgb(38, 148, 175);font-size: 15px;color: white;display: inline-block;cursor: pointer;}li:hover{background-color: rgb(202, 135, 157);}.clickRed{background-color: palevioletred;}</style>

h5+script部分

 <div id="app"><my-header></my-header></div><template id="header"><div><ul><li v-for="item in items" v-bind:class="item.clickRed" @click.self="click(item.name)">{{item.name}}</li></ul></div></template><script>Vue.component('my-header',{template:'#header',data(){return{items:[{name:"音乐",clickRed:''},{name:"体育",clickRed:''},{name:"影视",clickRed:''},{name:"图片",clickRed:''}]}},methods:{click(name){//清空classthis.items.some((item)=>{item.clickRed=''})//当前元素赋予classthis.items.some((item)=>{ if(name==item.name){return item.clickRed='clickRed'}})}}})var vm=new Vue({el: '#app',})</script>

实现效果：

3、导航栏（老师发的案例）

<!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>立体导航栏</title><link rel="stylesheet" href="./style.css" type="text/css"><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><style>*{margin: 0;padding: 0;box-sizing: border-box;font-family: "Popins",sans-serif;}.container{background: #ffbdc9;width: 100%;height: 100vh;display: flex;align-items: center;justify-content: center;}nav{background: #fff;border-radius: 50px;padding: 10px;box-shadow: 0 25px 20px -20px rgba(0, 0, 0, 0.4);}nav ul li{list-style: none;display: inline-block;padding: 13px 35px;margin: 10px;font-size: 18px;font-weight: 500;color: #777;cursor: pointer;position: relative;z-index: 2;transition: color 0.5s;}nav ul li::after{content: "";background: #f44566;width: 100%;height: 100%;border-radius: 30px;position: absolute;top: 100%;left: 50%;transform: translate(-50%,-50%);z-index: -1;opacity: 0;transition: top 0.5s,opacity 0.5s;}nav ul li:hover{color: #fff;}nav ul li:hover::after{top: 50%;opacity: 1;}</style></head><body><div class="container"><nav><ul><li>音乐</li><li>体育</li><li>影视</li><li>图片</li></ul></nav></div></body>
</html>

实现效果：

Vue作业(实现比较数字大小，实现导航栏)相关推荐

Vue使用插槽vm.$slots实现一个导航栏结构
<Vue.js前端开发实践> 黑马程序员第3章课后编程题答案: 请使用插槽vm.$slots实现一个导航栏结构不多说话,代码如下: <!DOCTYPE html> < ...
vue根据权限生成动态路由、导航栏
基本思路: 1,创建vueRouter,用公共路由实例化 2,创建需要根据权限筛选的路由对象(在路由对象,添加必要的权限判断字段) 3,登录完成,由后端配合返回当前用户的权限集合 4,筛选出有权限的路 ...
Vue + Spring Boot 项目实战（八）：导航栏与图书页面设计
文章目录前言一.导航栏的实现 1.路由配置 2.使用 NavMenu 组件二.图书管理页面 2.1. LibraryIndex.vue 2.SideMenu.vue 3.Books.vue 前言 ...
Vue：如何保持导航栏的高亮状态
我们在利用Vue写后台管理系统时,对于导航栏我们需要保持其处于选择的高亮状态,大概要经过如下三个步骤: 为所需要的点击的二级菜单栏设置点击事件,把对应的index值保存在sessionStorage中 ...
Vue + Spring Boot 项目实战（七）：导航栏与图书页面设计
本篇目录前言一.导航栏的实现 1.路由配置 2.使用 NavMenu 组件二.图书管理页面 1.LibraryIndex.vue 2.SideMenu.vue 3.Books.vue 前言之前 ...
eclipse导航栏与界面字体大小更改
界面字体: (6条消息) eclipse字体大小设置教程(eclipse主窗口和控制台字体大小设置)_江湖行骗老中医-CSDN博客_eclipse窗口字体大小设置导航栏字体: (6条消息) Ecli ...
Vue使用导航栏router模式，设置的default-active无效解决
问题说明最近开始使用Vue进行开发,但是在使用导航栏的router模式的时候,遇到设置default-active无效的问题,就是设置了default-active,但是没有默认出现该有的页面,仍然 ...
html设置nav标签高度,html – Bootstrap带导航栏的100％高度
你必须从100%减去导航栏的高度.有几种解决方案,其中许多将包括JavaScript,但您不需要. 1:盒子大小给导航栏一个绝对的位置.那么你有其他元素的内容在它下面消失的问题. 接下来是下一个诀窍 ...
小程序侧边导航栏左右联动
1.点击左边导航栏,右边内容滚动到指定区域用scroll-view组件中的scroll-into-view来解决 <view class="content-group"&g ...

Vue作业(实现比较数字大小，实现导航栏)

Vue作业(实现比较数字大小，实现导航栏)相关推荐

最新文章

热门文章