vue练习3 component @click :class 简单练习

最新推荐文章于 2024-05-27 15:43:19 发布
最新推荐文章于 2024-05-27 15:43:19 发布
阅读量254 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47291803/article/details/113444429
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1">
		<title></title>
		<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.css" rel="stylesheet">
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
		
	</head>
	<style>
		*{padding: 0;margin: 0;list-style: none;}
		@media (min-width:768px ) {
			#app{max-width: 768px;}
		}
		@media (max-width:375px ) {
			#app{min-width: 375px;}
		}
		#app{height: 100vh;width: 100%;border: 1px solid gainsboro;margin: 0 auto;display: flex;flex-direction: column;}
		.head{height: 40px;width: 100%;border-bottom: 1px solid gainsboro;display: flex;align-items: center;}
		.head i{color: silver;margin:0 20px;}
		.head div{height: 30px;width: 80%;background: #F5F5F5;display: flex;align-items: center;border-radius: 20px;}
		.head input{height:100%;outline: none;border: none;border-radius: 20px;padding-left: 10px;font-size: 15px;color: ;background: #F5F5F5;flex: 1;}
		.main{flex: 1;display: flex;height:calc(100vh - 40px - 50px);}	
		.leftlist{height:calc(100vh - 40px - 50px);width: 100px;background: ghostwhite;display: flex;flex-direction: column;overflow-y: auto;}
		.leftlist::-webkit-scrollbar{display:none;}
		.lis{min-height: 40px ! important;background: ghostwhite;display: flex;justify-content: center;align-items: center;}
		.rightlist{flex: 1;}
		.bottom{height: 50px;width: 100%;border-top: 1px solid pink;box-shadow:0px -2px 8px 0px rgba(240,128,128,.5);z-index: 2;}
		.current{background: white !important;}
		.rlist{display: flex;flex-wrap: wrap;padding: 20px;}
		.rlist>div{height: 30px; width: 50px;border: 1px solid black;display: flex;justify-content: center;align-items: center;margin: 10px;}
	</style>
	<body>
		<div id="app">
			<v-head></v-head>
			<v-main></v-main>
			<v-bottom></v-bottom>
		</div>
		<template id="head">
			<div class="head">
				<i class="fa fa-chevron-left fa"></i>
				<div >
					<i class="fa fa-search fa"></i><input  />
				</div>
				
			</div>
		</template>
		
		<template id="main">
			<div class="main">
				<div class="leftlist" >
					<div v-for="(item,index) in leftlist" @click="change(item.name)"  :class="['lis',listname==item.name?current:' ']">
						{{item.classification}}
					</div>		
				</div>
				<div class="rightlist">
					<component :is='listname'></component>
				</div>
			</div>
		</template>
		
		<template id="bottom">
			<div  class='bottom'>
				
			</div>
		</template>
		
		<template id="hot">
			<div class="rlist">
				<div v-for="(item,index) in menu">
					{{item}}
				</div>
			</div>
		</template>
		
				<template id="phone">
			<div class="rlist">
				<div v-for="(item,index) in menu">
					{{item}}
				</div>
			</div>
		</template>
		
				<template id="computer">
			<div class="rlist">
				<div v-for="(item,index) in menu">
					{{item}}
				</div>
			</div>
		</template>
		
				<template id="ele">
			<div class="rlist">
				<div v-for="(item,index) in menu">
					{{item}}
				</div>
			</div>
		</template>
	</body>
	<script>
		var head={
			template:'#head'
		}
		var main={
			template:'#main',
			data(){
				return{
						leftlist:[
				{classification:'热门推荐',menu:['空调','手机','电脑'],name:'hot'},
				{classification:'手机数码',menu:['空调','手机','电脑'],name:'phone'},
				{classification:'电脑办公',menu:['空调','手机','电脑'],name:'computer'},
				{classification:'家用电器',menu:['空调','手机','电脑'],name:'ele'},
				{classification:'家用电器',menu:['空调','手机','电脑'],name:'ele'},
				{classification:'家用电器',menu:['空调','手机','电脑'],name:'ele'},
				{classification:'家用电器',menu:['空调','手机','电脑'],name:'ele'},
				{classification:'家用电器',menu:['空调','手机','电脑'],name:'ele'},
				{classification:'家用电器',menu:['空调','手机','电脑'],name:'ele'},
				{classification:'家用电器',menu:['空调','手机','电脑'],name:'ele'},
				{classification:'家用电器',menu:['空调','手机','电脑'],name:'ele'},
				{classification:'家用电器',menu:['空调','手机','电脑'],name:'ele'},
				{classification:'家用电器',menu:['空调','手机','电脑'],name:'ele'},
				{classification:'家用电器',menu:['空调','手机','电脑'],name:'ele'},
				{classification:'家用电器',menu:['空调','手机','电脑'],name:'ele'},
				{classification:'家用电器',menu:['空调','手机','电脑'],name:'ele'},
				{classification:'家用电器',menu:['空调','手机','电脑'],name:'ele'},
				{classification:'家用电器',menu:['空调','手机','电脑'],name:'ele'},
				{classification:'家用电器',menu:['空调','手机','电脑'],name:'ele'},
				{classification:'家用电器',menu:['空调','手机','电脑'],name:'ele'},
				{classification:'家用电器',menu:['空调','手机','电脑'],name:'ele'}
				],
				listname:'hot',
				num:0,
				current:'current'
				}
			},
			components:{
				'hot':{
						template:'#hot',
						data(){
							return{
								menu:['空调','手机','电脑','风扇','微波炉']
							}
						}
					},
				'phone':{
						template:'#phone',
						data(){
							return{
								menu:['空调','手机','电脑1']
							}
						}
				},
				'computer':{
						template:'#computer',
						data(){
							return{
								menu:['空调','手机','电脑2']
							}
						}
					},
				'ele':{
						template:'#ele',
						data(){
							return{
								menu:['空调','手机','电脑3']
							}
						}
					},
			},
			methods:{
				change(it){
					this.listname=it
				}
			}
		}
		var bottom={
			template:'#bottom'
		}
		new Vue({
			el:'#app',
			data:{
				bottomlist:['首页','分类','购物车','用户'],
				fenlei:'热门推荐'
			},
			components:{
			'v-head':head,
			'v-main':main,
			'v-bottom':bottom
			}
		})
	</script>
</html>

效果：
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

t_面海
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
浅谈Vue内置component组件的应用场景
08-27
Vue 内置 component 组件的应用场景 在 Vue 框架中，内置的 component 组件是一种非常强大的工具，能够帮助开发者快速构建复杂的用户界面。下面将通过实践场景，深入浅出地探讨 Vue 内置 component 组件的应用场景...
vue3-jsx-study:vue3 + jsx的一些示例
04-19
return () => <div class="my-component">{slots.default()}; } }; // 使用 <MyComponent><p>Hello, World!</p></MyComponent> ``` 2. 响应式属性与事件处理：在JSX中使用`ref`和事件监听。 ```jsx // ...
Vue.component，click，事件修饰符
sc0002的博客
10-28 778
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> &l
Vue 所有指令（v-on:click = @click v-blind:class = :class）的学习
写博客只为学习
04-11 3115
[color=blue][size=medium][b]先说一下指令里面的值都是表达式[/b][/size][/color] [code="js"]new Vue({ el: "#box", // element（元素） 当前作用域 id="box" data(){ return { //用return返回对象 ...
Vue3项目练习详细步骤(第一部分：项目构建，登录注册页面)
最新发布
dafsq的博客
05-27 3304
Vue3项目练习详细步骤(第一部分：项目构建，登录注册页面)
click点击以后添加新class，删除其余同名class
anzheng6118的博客
06-01 239
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <...
TypeScript+Vue 插件vue-property-decorator的使用总结
weixin_33908217的博客
12-06 3228
为什么80%的码农都做不了架构师？>>> ...
vue - vue的动态组件(component)使用
qq_43886365的博客
11-24 4775
vue的动态组件(component)使用
Vue课程雨课堂练习选择题判断题
01-18
1. `vm.$attrs`：Vue实例的`$attrs`属性可以用来获取父组件传递给子组件的所有未声明为`props`的属性，包括`class`和`style`。这意味着如果一个属性没有在子组件的`props`列表中声明，它会被收集到`$attrs`中。 2. ...
Vue 组件（component）教程之实现精美的日历方法示例
08-28
Vue组件是Vue.js框架的核心特性，它允许我们将UI拆分成可重用的模块，从而提高代码的可维护性和效率。在本教程中，我们将探讨如何使用Vue组件来创建一个跨平台兼容的精美日历组件。 首先，理解Vue组件的基本结构至...
基于vue-cli3和element实现登陆页面
10-16
虽然这个例子中的登录验证非常简单，但它演示了如何结合Vue CLI 3、Element UI和Vue Router来快速开发一个功能齐全的登录组件。在实际项目中，你应该使用更安全的验证机制，并考虑用户体验，如表单验证、记住密码、...
vue3-class-component
04-08
管理员2 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
详解TypeScript+Vue 插件 vue-class-component的使用总结
12-10
首先 下载 npm install vue-class-component vue-property-decorator --save-dev 一梭子直接干； 其次，咱来说说它们的区别与联系： vue-property-decorator社区出品；vue-class-component官方出品 vue-class-component提供了Vue、Component等； vue-property-decorator深度依赖了vue-class-component，拓展出了更多操作符：@Prop、@Emit、@Inject、@Model、@Provide、@Watch； 开发时正常引入vue-p
Vue3动态组件component详解
qq_45861961的博客
08-15 1万+
这样就展示了一个动态组件的完整用法,可以方便地在不同组件间进行切换并传递数据。动态组件非常适合需要根据不同条件展示不同内容的场景,掌握它可以更灵活地构建组件。动态组件component是Vue中非常实用的一个功能,它可以根据条件动态切换不同的组件。本文将详细介绍其用法。这样就可以通过修改currentComponent的值,来动态切换ComponentA和ComponentB了。需要注意的是,对于动态组件,Vue会在组件切换时销毁前一个组件实例并创建新实例。所以切换动态组件时不会保留组件的状态。
Vite+pnpm构建Vue3+TypeScript+vue-class-component+Vue router+pinia+ESLint（prettier）+sass
GIS小虫的博客
06-14 3100
RT
vue2升级vue3：class component的遗憾
周陆军的博客，分享it技术。
06-21 1090
the Class API proposal is being dropped。之前class components组件升级vue3，还是用composite api重头再来^
用vit构建一个，使用 vue-class-component 和 vue-property-decorator的vue3项目
qq_49581491的博客
01-03 624
【代码】用vit构建一个，使用 vue-class-component 和 vue-property-decorator的vue3项目。
vue-class-component使用及详解
weixin_45821809的博客
02-27 689
vue-class-component使用及详解
vue 内置组件 component 的用法
热门推荐
weixin_42333548的博客
06-01 9万+
component is 内置组件切换方法一： component组件（单独拿出一个组件来专门进行切换使用） 使用is来绑定你的组件：如下面的reviewedPlan planDetailsList attachmentList等引入的组件名 changeViewFun 是用来切换组件的方法 通过给is绑定的currentView来实现切换组件 pathUrl就是当前的路由 ...
vue3 component父调用子组件方法
09-08
在Vue3中，父组件可以通过expose和ref来调用子组件的方法。首先，在父组件中使用ref指令关联子组件，通过定义子组件实例并命名为childComp。然后，可以通过childComp.value来访问子组件的方法和数据。例如，可以通过childComp.value.play()来调用子组件的play方法。此外，还可以通过childComp.value.state.title来获取子组件的title数据。这样，父组件就可以轻松地调用子组件的方法了。 举个例子，在父组件的template中可以这样写： <template> <div class="parent"> <child ref="childComp"></child> <button @click="onTry">点击试一试</button> </div> </template> 然后，在script setup中，可以这样定义子组件实例和调用子组件方法： <script setup> import { ref } from "vue"; import child from "./child.vue"; const childComp = ref(null); const onTry = () => { let msg = childComp.value.state.title; childComp.value.play(); }; </script> 这样，当点击“点击试一试”按钮时，父组件就可以调用子组件的方法了。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值