首页 > 其他分享 >Vue 嵌套选项卡 购物车

Vue 嵌套选项卡 购物车

时间:2023-11-30 11:02:10浏览次数:41  
标签:Vue 选项卡 name jsl component 购物车 template jsl2 js

嵌套选项卡 

	<!DOCTYPE html>
	<html>
		<head>
			<meta charset="utf-8" />
			<meta name="viewport" content="width=device-width, initial-scale=1">
			<script src="js/vue.js"></script>
			<title></title>
			<style>
				.contents {
					width: 200px;
					height: 200px;
					border: 1px solid red;
					font-size: 22px;
				}

				.active {
					background: green;
					color: white;
				}
			</style>
		</head>
		<body>
			<div id="app">
				<hr>
				<hr>
				<hr>
				<button v-for="bt in buttons" @click="cus(bt.component)"
					:class="{active : currbc==bt.component}">{{bt.name}}</button>


				<div class="contents">
					<component :is='currbc'></component>
				</div>
			</div>
			<template id="html">
				<div> html</div>
			</template>
			<template id="css">
				<div> css</div>
			</template>
			<template id="jsl">
				<div> jsl</div>
			</template>
			<template id="jsl2">
				<div> jsl2</div>
			</template>
			<template id="js">
				<div>
					<button v-for="btjs in buttonsjs" @click="cusjs(btjs .component)"
						:class="{active : currbcjs==btjs .component}">{{btjs .name}}</button>


					<div class="contentss">
						<component :is='currbcjs'></component>
					</div>

				</div>
			</template>

			<script>
				new Vue({
					el: "#app",
					data() {
						return {
							currbc: 'js',

							buttons: [{
									name: "Html",
									component: "Html"
								},
								{
									name: "css",
									component: "css"
								},
								{
									name: "js",
									component: "js"
								}
							]
						}
					},
					methods: {
						cus(i) {
							this.currbc = i
						}
					},
					components: {
						Html: {
							template: "#html"
						},
						css: {
							template: "#css"
						},
						js: {
							template: "#js",
							data() {
								return {
									currbcjs: 'jsl',

									buttonsjs: [{
											name: "jsl",
											component: "jsl"
										},
										{
											name: "jsl2",
											component: "jsl2"
										}
									]
								}

							},
							methods: {
								cusjs(i) {
									this.currbcjs = i
								}
							},
							components: {
								jsl: {
									template: "#jsl"
								},
								jsl2: {
									template: "#jsl2"
								},
							}
						},
					}
				})
			</script>
		</body>
	</html>
	<!-- 设置一个参数 先把参数存起来 然后 ,对存起来之后的数加减 -->

  

标签:Vue,选项卡,name,jsl,component,购物车,template,jsl2,js
From: https://www.cnblogs.com/nice2018/p/17866801.html

相关文章

  • vue-treeselect使用案例
    https://vue-treeselect.js.org/父子节点没有关联<TreeSelectflatstyle="background-color:#0e3977"placeholder="请选择"v-model="org":multiple="true":options="state.orgData&qu......
  • Vite4+Typescript+Vue3+Pinia 从零搭建(5) - 路由router
    项目代码同步至码云weiz-vue3-templateVueRouter是Vue.js的官方路由。它与Vue.js核心深度集成,让用Vue.js构建单页应用变得轻而易举。1.安装npmivue-router@42.集成1.新建两页面进行示例在src/view下新建home.vue和login.vue,内容如下:<scriptsetuplang="t......
  • [Vue] vue学习笔记(3): 渲染
    条件渲染主要有四个指令v-show:控制元素可视性,即是否增加样式display=nonev-if/v-else-if/v-else:类似if/else-if/else的逻辑结构,进行条件判断,控制元素的可视性,注意这种方法会直接决定元素是否出现DOM树上,而非样式改变<!---nisapropertyofvueinstance---><divv-if......
  • vue.js(二)补充
    示例表单:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><scriptsrc="./js/vue.js"></script><title>Title</title></head><body><divclass......
  • 如何在一个html页面中引入vue跟axios
    如果想在HTML页面中引入Vue和Axios,可以按照以下步骤进行操作1、首页新建一个html页面2、打开vue官网进行引入或者下载vue.min.js包进行本地引入3、下载axios包,如下图所示4、在js部分中写的如下图所示5、axios使用......
  • [Vue] vue学习笔记(3): 绑定样式
    动态绑定样式vue允许动态设置class的值,通过利用v-bind指令......
  • Vuex
    Vuex用于状态管理状态管理模式:状态:驱动应用的数据源。state视图:以声明方式将状态映射到视图。操作:响应在仕途上的用户输入导致的状态变化。Vuex的状态存储是响应式的。不能直接改变store中的状态。从store实例中读取状态最简单的方法就是在计算属性中......
  • 使用vueuse 显示时间
    背景设计图里面包含一个日期显示的东西,查找下!网上很多都是使用js去写nonono使用vueuse快速实现一个两行代码能弄完,还需要那么多干嘛,下班!使用Vue3Marquee(vue3-marquee)......
  • vue 创建 项目方式
    使用webpack创建vuecreatepageName资料https://cli.vuejs.org/zh/guide/使用vite创建npmcreatevue@latest资料https://cn.vitejs.dev/guide/clihttps://github.com/vuejs/create-vue......
  • 视频直播源码,采用Redis实现购物车功能
    视频直播源码,采用Redis实现购物车功能1Redis核心配置类packagecom.jmh.springboot03.config; importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.beans.factory.annotation.Configurable;importorg.springframework.context.annot......