Vue训练

AnYaWhite

已于 2022-04-28 16:34:24 修改

阅读量888

点赞数 2

分类专栏：学习技能 Vue训练文章标签： vue

于 2022-04-27 14:57:41 首次发布

本文链接：https://blog.csdn.net/weixin_52335574/article/details/124447920

版权

本文记录了作者在Vue框架的学习过程中进行的实战训练，包括点击按钮实现数字增减、元素显示隐藏、颜色切换、多选框操作、下拉列表、滑块功能和页面切换等。作者强调了边学边练的重要性，并欢迎读者提出改进意见。

摘要由CSDN通过智能技术生成

Vue训练

学了半个学期的Vue框架，所实话没怎么学懂。还是要边学边训练，还要知识点要及时回顾总结。

1.点击按钮实现数字增加和减小

实现点击按钮的同时控制数字的增加和减小。那么就有一个点击事件，我们就要用到`v-on`实现点击事件（可以简写成@），其格式为`v-on:事件名 =“函数/语句”。`要实现我们就要在数字的加减，就要设置变量。

<div>
	{
  {count}}
<button @click="count++">+</button>  
<button @click="count--">-</button>
</div>

<script>
       const app = new Vue({
       data:{
       count:0
       }
       }).$mount("#app");
</script>

2.点击按钮显示和隐藏

一个是按钮点击事件，一个是隐藏和显示效果。隐藏和显示效果，使用v-show标签来实现,格式：v-show ='布尔值'。关于显示和隐藏的字的切换我们直接封装一个方法。

<div>
<button @click ='Cut' >{
  {font}}</button>
<div class="box"  v-show='show' > </div>
</div>

<script>
       const app = new Vue({
       data:{
       font:'隐藏'，
       show:true
       }
       }).$mount("#app")
</script>

Cut:function(){
		this.show = !this.show
	if(this.show == true){
		this.font ='隐藏'
		}else{
		this.font = '显示'
		}
}
<style>
	.box{
		width:100px;
		height:100px;
		border:1px solid #333;
		background-color:red;
		}
</style>

3.点击实现颜色的切换

实现颜色的切换，我们就要获取Vue中的变量值，来对HTMl进行修饰。使用v-bind来获取变量值（简写为：）格式：vv-bind：属性名="值"。实现颜色的切换我们声明一个方法。

<div :class="color" @click='Colorswich'></div>

<script>
       const app = new Vue({
       data:{
    		color：‘a’
       		}
       }).$mount("#app")
</script>

Colorswich:function(){
	if(this.color == 'a'){
		this.color = 'b'
	}else if(this.color == 'b'){
		this.color='c'
	}else if(this.color == 'c'){
		this.color='a'
			}
	}
<style>
		.a{
			width:100px;
			height:100px;
			border:1px solid #333;
			background-color:red;
			}
		.b{