初学者对Vue路由与组件运用

最新推荐文章于 2024-06-15 14:41:39 发布

一个后端小白

最新推荐文章于 2024-06-15 14:41:39 发布

阅读量66

点赞数

分类专栏： VUE 路由组件文章标签： vue.js html5 css

本文链接：https://blog.csdn.net/weixin_44137255/article/details/119026116

版权

VUE 同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

路由

2 篇文章 0 订阅

订阅专栏

组件

2 篇文章 0 订阅

订阅专栏

Vue路由与组件运用

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品首页</title>
		<link rel="stylesheet" href="css/shopXq.css">
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="node_modules/vue-router/dist/vue-router.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="container">
		<!--通过router-view指定盛放组件的容器 -->
			<router-view></router-view>
		</div>
		 <script>
			  var testLogin = Vue.component("login",{
			   template:`
			    <div>
			     <h1>商品列表</h1>
				 <table>
				         <thead>
				             <tr>
				                 <th></th>
				                 <th>书籍名称</th>
				                 <th>价格</th>
				                 <th>购买数量</th>
				                 <th>操作</th>
				             </tr>
				             
				         </thead>
				         <tbody>
				             <tr v-for = "(item,index) in book">
				                 <td>{{item.id}}</td>
				                 <td>{{item.name}}</td>
				                 <td>{{item.price}}</td>
				                 <td>
				                     <button @click = "btn(index)" v-bind:disabled = "item.count <= 1">-</button>
				                          {{item.count}}
				                     <button @click = "btns(index)">+</button>
				                 </td>
				                 <td>
				                     <router-link :to="{path:'myRegister',query: { id: item.id,name:item.name,price:item.price,count:item.count }}">加入购物车</router-link>
				                 </td>
				             </tr>
				         </tbody>
						 <h2>总价格 {{totalprice}}</h2>
				 </table>
			    </div>
			   `,
			   data:function(){
				   return {
					   book:[
					       {
					           id :1,
					           name:'《Java从入门到精通》',
					           price:85+".00",
					           count:1
					       },
					       {
					           id :2,
					           name:'《C语言从入门到精通》',
					           price:59+".00",
					           count:1
					       },
					       {
					           id :3,
					           name:'《C++从入门到精通》',
					           price:39+".00",
					           count:1
					       },
					       {
					           id :4,
					           name:'《PHP从入门到精通》',
					           price:128+".00",
					           count:1
					       }
					   ],
				   }
			   },
			   methods:{
				   btn(index){
				       this.book[index].count--;
				   },
				   btns(index){
				       this.book[index].count++
				   },
			   },
			   computed:{
				   totalprice:function(){
					   let result = 0
					   for(let i =0;i<this.book.length;i++){
					   	result += this.book[i].price * this.book[i].count
					   }
					   return result+".00"
				   }
			   }
			   /*to后面是路由地址*/
			  })
			  var testRegister = Vue.component("register",{
			   methods:{
			    jumpToLogin:function(){
			     this.$router.push('/myLogin');
			    }
			   },
			   template:`
			    <div>
			     <h1>商品详情</h1>
				 <table>
				         <thead>
				             <tr>
				                 <th></th>
				                 <th>书籍名称</th>
				                 <th>价格</th>
				                 <th>购买数量</th>
				             </tr>
				             
				         </thead>
				         <tbody>
				             <tr>
				                 <td>{{this.$route.query.id}}</td>
				                 <td>{{this.$route.query.name}}</td>
				                 <td>{{this.$route.query.price}}</td>
				                 <td>
				                      {{this.$route.query.count}}
				                 </td>
				             </tr>
				         </tbody>
				 		<h2>总价格 {{totalprice}}</h2>
				 </table>
			     <button @click="jumpToLogin">返回</button>
			    </div>
			   `,
			   computed:{
			   			   totalprice:function(){
							   var result = 0;
			   				   result += this.$route.query.price * this.$route.query.count;
			   				   return result+".00"
			   			   }
			   }
			  })
			  //配置路由词典
			  const myRoutes =[
			   {path:'',component:testLogin},
			   {path:'/myLogin',component:testLogin},
			   {path:'/myRegister',component:testRegister}
			  ]
			 
			  const myRouter = new VueRouter({
			   routes:myRoutes
			  })
			  new Vue({
			   router:myRouter,
			   el:"#container",
			   data:{
			    
			   }
			  })
			 </script>
		</body>
</html>

一个后端小白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初学者对Vue路由与组件运用

Vue路由与组件运用代码：商品首页 </div> <script> var testLogin = Vue.component("login",{ template:` <div> <h1>商品列表</h1> <table> <thead> <tr>
复制链接

扫一扫