Vue

最新推荐文章于 2022-11-19 12:48:57 发布

潦艹

最新推荐文章于 2022-11-19 12:48:57 发布

阅读量1.5k

点赞数

分类专栏： Vue.js 文章标签： Vue

本文链接：https://blog.csdn.net/weiwei266/article/details/89819160

版权

Vue.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、保留两位小数

var num=12.345;
var n=num.toFixed(2);
结果位12.34

二、splice用法

从第三个位置开始删除数组后的两个元素：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,2)

fruits 输出结果：
Banana,Orange

移除数组的第三个元素，并在数组第三个位置添加新元素:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1,"Lemon","Kiwi");

fruits 输出结果：
Banana,Orange,Lemon,Kiwi,Mango

在这里插入图片描述

三、push用法

1、可以添加元素

添加一个以上元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi","Lemon","Pineapple")

以上实例将输出
Banana,Orange,Apple,Mango,Kiwi,Lemon,Pineapple

2、也可以把元素存入

saveStu(){
					this.stuList.push(this.newStu)  //表示将 newStu 存入  stuList
					this.newStu=new student('','','f','')//把添加的学生信息存放在新的对象

				}

四、class绑定

<style type="text/css">
		h2{
			color: #022c43;
		}
		hr{
			border:solid 3px #085f63;
		}
		.bg{
			background-color: #385170;
			color: white;
		}
		.danger{
			color: red;
		}
		.safe{
			color: blue;
		}
		.bg-info{
			color: #233142;
		}
	</style>
</head>
<body>
	<div class="container mt-5" id="stuSystem">
		<h2>学生管理系统 V3.0</h2>
		<h4 v-bind:class="{danger:stuList.length<=2,safe:stuList.length>2}">
		当前系统{{stuList.length}}有位学生</h4>

五、addClass（）和removeClass（）用法

			onmouseover="$(this).addClass('bg-info')" 
		    onmouseout="$(this).removeClass('bg-info')"

六、`transition`—过渡动画组件，每个组件都有一个唯一名字，该动画组件内部只能有一个根元素（`自定义动画`）

`CSS`

<style type="text/css">
		/*动画进入*/
			/*名字是fade*/
		.fade-enter{		/*动画开始时状态*/  
			  opacity:0;
			  width: 30%;
		}
		.fade-enter-active{		 /*动画运行时*/
			  transition:width 4s,opacity  4s;
		}
		.fade-enter-to{		/*动画结束时状态*/
			  opacity:1;
			  width: 100%;
		}

		/*//动画离开*/
		.fade-leave{  /*动画开始时状态*/
			opacity:1;
			width: 100%;
		}
		.fade-leave-active{  /*动画运行时*/
			transition:width 4s,opacity  4s;
			
		}
		.fade-leave-to{  /*动画结束时状态*/
			  opacity:0;
			  width: 30%;
		}

	</style>

`HTML`

		<button class="btn btn-warning"  @click="show=!show">确定</button>
		
		<transition name="fade"> 		 //注意   name  为  fade
			<div v-if="show">
			.....................
			</div>
		</transition>

`Vue`

var vm=new Vue({
			el:"#app",
			data:{
				products:[
					{name:"1竹制滑雪衣",price:200,describe:"1-我们的保暖背心是由有机竹子和可回收塑料羽绒填充物制成的，是男人和女人的最爱。你将有助于改善环境，并且在很多场合都有一件容易穿的衣服。",img:"pics/unisex-grunge-jeans_LYNDA_29937.jpg"},

					{name:"2竹制滑雪衣",price:300,describe:"2-我们的保暖背心是由有机竹子和可回收塑料羽绒填充物制成的，是男人和女人的最爱。你将有助于改善环境，并且在很多场合都有一件容易穿的衣服。",img:"pics/ski-coat_LYNDA_29940.jpg"},

					{name:"3竹制滑雪衣",price:400,describe:"3-我们的保暖背心是由有机竹子和可回收塑料羽绒填充物制成的，是男人和女人的最爱。你将有助于改善环境，并且在很多场合都有一件容易穿的衣服。",img:"pics/unisex-thermal-vest_LYNDA_29944.jpg"},
					
					{name:"4竹制滑雪衣",price:500,describe:"4-我们的保暖背心是由有机竹子和可回收塑料羽绒填充物制成的，是男人和女人的最爱。你将有助于改善环境，并且在很多场合都有一件容易穿的衣服。",img:"pics/v-neck-long-sleeved-pullover_LYNDA_29946.jpg"},

					{name:"5竹制滑雪衣",price:600,describe:"5-我们的保暖背心是由有机竹子和可回收塑料羽绒填充物制成的，是男人和女人的最爱。你将有助于改善环境，并且在很多场合都有一件容易穿的衣服。",img:"pics/v-neck-sweater-for-men_LYNDA_29947.jpg"}
				],
				show:true,
			}
		})

七、`transition`—过渡动画组件，每个组件都有一个唯一名字，该动画组件内部只能有一个根元素（`利用第三方动画库`）

`html`

<button class="btn btn-warning"  @click="show=!show">确定</button>

<transition 
			enter-active-class="animated slideInRight"  		//第三方动画库
			leave-active-class="animated hinge" 		//第三方动画库
		>
		
			<div v-if="show">
				<div class="row mt-5 align-items-center"
				 	v-for="(item,index) in products"
				 	v-if="item.price<=priceBar">
					<button class="btn btn-dark">{{index+1}}</button>
					<div class="col-1">
						<button class="btn btn-info">
							<span class="fas fa-plus"></span>
						</button>
					</div>
					<div class="col-4">
						<img :src="item.img" class="img-fluid">
					</div>
					<div class="col">
						<div class="h3 text-warning">{{item.name}}</div>
						<div class="h5">{{item.describe}}</div>
						<div class="h3 text-info text-right">${{item.price}}</div>
					</div>
				</div>
			</div>
		</transition>

`Vue`

var vm=new Vue({
			el:"#app",
			data:{
				products:[
					{name:"1竹制滑雪衣",price:400,describe:"1-我们的保暖背心是由有机竹子和可回收塑料羽绒填充物制成的，是男人和女人的最爱。你将有助于改善环境，并且在很多场合都有一件容易穿的衣服。",img:"pics/unisex-grunge-jeans_LYNDA_29937.jpg"},

					{name:"2竹制滑雪衣",price:600,describe:"2-我们的保暖背心是由有机竹子和可回收塑料羽绒填充物制成的，是男人和女人的最爱。你将有助于改善环境，并且在很多场合都有一件容易穿的衣服。",img:"pics/ski-coat_LYNDA_29940.jpg"},

					{name:"3竹制滑雪衣",price:700,describe:"3-我们的保暖背心是由有机竹子和可回收塑料羽绒填充物制成的，是男人和女人的最爱。你将有助于改善环境，并且在很多场合都有一件容易穿的衣服。",img:"pics/unisex-thermal-vest_LYNDA_29944.jpg"},
					
					{name:"4竹制滑雪衣",price:800,describe:"4-我们的保暖背心是由有机竹子和可回收塑料羽绒填充物制成的，是男人和女人的最爱。你将有助于改善环境，并且在很多场合都有一件容易穿的衣服。",img:"pics/v-neck-long-sleeved-pullover_LYNDA_29946.jpg"},

					{name:"5竹制滑雪衣",price:900,describe:"5-我们的保暖背心是由有机竹子和可回收塑料羽绒填充物制成的，是男人和女人的最爱。你将有助于改善环境，并且在很多场合都有一件容易穿的衣服。",img:"pics/v-neck-sweater-for-men_LYNDA_29947.jpg"}
				],
				
				show:true,
			}
		})

八、`transition-group`过渡动画组（支持多个元素过渡动画效果），必须要有唯一的`key`、还需要有个`根元素`（`利用第三方动画库`）

`html`

<!-- 需要一个根元素，用tag表示自定义一个div的根元素，也可以自己再写一个div，把下面要做动画包起来  -->
		<transition-group 
			tag="div" 
			enter-active-class="animated bounceInDown"
			leave-active-class="animated bounceOutUp"
		>
			
				<div class="row mt-3 align-items-center"
				 	v-for="(item,index) in products"
				 	v-if="item.price<=priceBar"
				 	v-bind:key="item.pid"> <!-- key必须是唯一值 -->
					<button class="btn btn-dark">{{index+1}}</button>
					<div class="col-1">
						<button class="btn btn-info">
							<span class="fas fa-plus"></span>
						</button>
					</div>
					<div class="col-4">
						<img :src="item.img" class="img-fluid">
					</div>
					<div class="col">
						<div class="h3 text-warning">{{item.name}}</div>
						<div class="h5">{{item.describe}}</div>
						<div class="h3 text-info text-right">${{item.price}}</div>
					</div>
				</div>
			
		</transition-group>

`Vue`

var vm=new Vue({
			el:"#app",
			data:{
				products:[
					{pid:1,name:"1竹制滑雪衣",price:400,describe:"1-我们的保暖背心是由有机竹子和可回收塑料羽绒填充物制成的，是男人和女人的最爱。你将有助于改善环境，并且在很多场合都有一件容易穿的衣服。",img:"pics/unisex-grunge-jeans_LYNDA_29937.jpg"},

					{pid:2,name:"2竹制滑雪衣",price:600,describe:"2-我们的保暖背心是由有机竹子和可回收塑料羽绒填充物制成的，是男人和女人的最爱。你将有助于改善环境，并且在很多场合都有一件容易穿的衣服。",img:"pics/ski-coat_LYNDA_29940.jpg"},

					{pid:3,name:"3竹制滑雪衣",price:700,describe:"3-我们的保暖背心是由有机竹子和可回收塑料羽绒填充物制成的，是男人和女人的最爱。你将有助于改善环境，并且在很多场合都有一件容易穿的衣服。",img:"pics/unisex-thermal-vest_LYNDA_29944.jpg"},
					
					{pid:4,name:"4竹制滑雪衣",price:800,describe:"4-我们的保暖背心是由有机竹子和可回收塑料羽绒填充物制成的，是男人和女人的最爱。你将有助于改善环境，并且在很多场合都有一件容易穿的衣服。",img:"pics/v-neck-long-sleeved-pullover_LYNDA_29946.jpg"},

					{pid:5,name:"5竹制滑雪衣",price:900,describe:"5-我们的保暖背心是由有机竹子和可回收塑料羽绒填充物制成的，是男人和女人的最爱。你将有助于改善环境，并且在很多场合都有一件容易穿的衣服。",img:"pics/v-neck-sweater-for-men_LYNDA_29947.jpg"}
				],
				priceBar:1000,
				show:true,
			}
		})

九、慢慢插入的动画效果

`css`

.pro-move{
				transition: transform 2s;
			}
		</style>

`HTML`

<button class="btn btn-warning"  @click="show=!show">确定</button>

<transition-group 
			tag="div" 
			name="pro"             //主要是有了个name=pro和css的pro-move对应
			enter-active-class="animated bounceInDown"
			leave-active-class="animated bounceOutUp"
		>
			
				<div class="row mt-3 align-items-center"
				 	v-for="(item,index) in products"
				 	v-if="item.price<=priceBar"
				 	v-bind:key="item.pid"> <!-- key必须是唯一值 -->
					<button class="btn btn-dark">{{index+1}}</button>
					<div class="col-1">
						<button class="btn btn-info">
							<span class="fas fa-plus"></span>
						</button>
					</div>
					<div class="col-4">
						<img :src="item.img" class="img-fluid">
					</div>
					<div class="col">
						<div class="h3 text-warning">{{item.name}}</div>
						<div class="h5">{{item.describe}}</div>
						<div class="h3 text-info text-right">${{item.price}}</div>
					</div>
				</div>
			
		</transition-group>

`Vue`

var vm=new Vue({
			el:"#app",
			data:{
				products:[
					{pid:1,name:"1竹制滑雪衣",price:900,describe:"1-我们的保暖背心是由有机竹子和可回收塑料羽绒填充物制成的，是男人和女人的最爱。你将有助于改善环境，并且在很多场合都有一件容易穿的衣服。",img:"pics/unisex-grunge-jeans_LYNDA_29937.jpg"},

					{pid:2,name:"2竹制滑雪衣",price:800,describe:"2-我们的保暖背心是由有机竹子和可回收塑料羽绒填充物制成的，是男人和女人的最爱。你将有助于改善环境，并且在很多场合都有一件容易穿的衣服。",img:"pics/ski-coat_LYNDA_29940.jpg"},

					{pid:3,name:"3竹制滑雪衣",price:500,describe:"3-我们的保暖背心是由有机竹子和可回收塑料羽绒填充物制成的，是男人和女人的最爱。你将有助于改善环境，并且在很多场合都有一件容易穿的衣服。",img:"pics/unisex-thermal-vest_LYNDA_29944.jpg"},
					
					{pid:4,name:"4竹制滑雪衣",price:600,describe:"4-我们的保暖背心是由有机竹子和可回收塑料羽绒填充物制成的，是男人和女人的最爱。你将有助于改善环境，并且在很多场合都有一件容易穿的衣服。",img:"pics/v-neck-long-sleeved-pullover_LYNDA_29946.jpg"},

					{pid:5,name:"5竹制滑雪衣",price:700,describe:"5-我们的保暖背心是由有机竹子和可回收塑料羽绒填充物制成的，是男人和女人的最爱。你将有助于改善环境，并且在很多场合都有一件容易穿的衣服。",img:"pics/v-neck-sweater-for-men_LYNDA_29947.jpg"}
				],
				priceBar:1000,
				show:false,
			}
		})

十、 emit指向外触发一个事件

Vue实例中

 methods:{
                addProductItemToCart(productItem){
                  
            }

子组件中

 @xyz="addProductItemToCart($event)" //$event表示被传递的值，是固定的代词

template中

 <div class="row mb-1 align-items-center"
                            v-for="(item,index) in productData"
                            v-if="item.price<=maxPrice"
                            :key="item.pid">
                            <div class="col-1 m-auto">
                            	// emit指向外触发一个事件
                                <button class="btn btn-info" @click="$emit('xyz',item)">   //emit触发 xyz 绑定事件，第二个参数 item表示要传递的值，即   v-for="(item,index) in productData" 里的item
                                    <span class="fas fa-cart-plus"></span>
                                </button>
                            </div>

十一、过滤器

Vue实例中

filters:{
				currency:function(val){
					return val+"元"
				},
				sign:function(val){
					return "["+val+"]"
				}


			}

html中

<div class="col">
	<!-- 过滤器的值用在这，即sign和currency -->
	<div class="h3 text-warning">{{item.name|sign}}</div>
	<div class="h5">{{item.describe}}</div>
	<div class="h3 text-info text-right">{{item.price|currency}}</div>
</div>

`效果`

在这里插入图片描述

潦艹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue

一、保留两位小数var num=12.345;var n=num.toFixed(2);结果位12.34二、splice用法从第三个位置开始删除数组后的两个元素：var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.splice(2,2)fruits 输出结果：Banana,Orange移除数组的第三个元素...
复制链接

扫一扫