原生Vue实现点击切换代码

原生Vue实现点击切换

vue页面分为三处。

第一处是：template 用来写页面div，p，ul，li等等。

第二处是：script 用来路由跳转，点击事件方法，请求后台路径，页面加载时的数据读取等等，当然也可以写js代码，计算函数等等，不过目前还不太会用。

第三处是: style 用来设置页面样式。

实现第一处代码，代码如下

<template>
	<div>
		<div class="dhl">
			<img src="../../assets/fj3.jpg" style="height: 200px;">
			<div class="pttz" style="width: 100%;
			line-height: 50px; height: 50px; ">
				<p v-on:click="xmfClick(ShowXmf)" @click="ShowXmfchange(1)"
				:class="{ red:changeRed == 1}"
				style=" width: 38%; border-radius: 3px 3px 3px 3px;
					height: 40px;line-height: 40px; border: 1px #515A6E solid; display: inline-block;">左按钮</p>
				<p v-on:click="tzrClick(ShowTzr)" @click="ShowTzrchange(2)"
				:class="{ red:changetzr == 2}"  style="
					border-radius: 3px 3px 3px 3px;  border: 1px #515A6E solid;
					width: 38%; height: 40px;line-height: 40px; margin-left: 10px; display: inline-block;">右按钮</p>
			</div>
			<!-- <img src="../../assets/dhl.gif" width="100%" height="180px"/> -->
		</div>
	<div >
    <h1 styel='color:red' v-if="ShowXmf">我是左按钮</h1>
  </div>
	<div >
	  <h1 styel='color:red' v-if="ShowTzr">我是右按钮</h1>
  </div>
</div>
</template>

实现第一处，效果图如下(template)：

实现第二处代码，代码如下

<script>

import axios from 'axios'
export default{
	name:'add',
	data () {
	    return  {
        ShowXmf: true,
        ShowTzr: false,
        isLogin:localStorage.getItem("token"),
        path:this.$global.serverPath,
        changeRed:1,
        changetzr:1,
	    }
	},
	mounted() {},

	methods:{
		ShowXmfchange(){
			this.changeRed = 1;
			this.changetzr = 0;
		},
		ShowTzrchange(){
			this.changeRed = 0;
			this.changetzr = 2;
		},
		// 点击页面事件 隐藏需要隐藏的区域
		 xmfClick(ShowXmf){
			 if(ShowXmf == true){
				   this.ShowXmf = true;
			 }else{
				  this.ShowXmf = true;
				  this.ShowTzr = false;
			 }
		 },
     tzrClick(ShowTzr){
       ShowTzr = true;
       if(ShowTzr == true){
            this.ShowXmf = false;
          if(this.ShowXmf!=true){
            this.ShowTzr = true;
          }
       }else{
        this.ShowTzr = true;
       }
     }
	 }
}

</script>

实现第二处，按钮的点击切换就完成了，效果图如下：

第三处Css样式大家可以自己定义。

在此也奉上我写的Css O(∩_∩)O

<style scoped>

	.red{
		color: #FFFFFF;
		background: -webkit-gradient(linear, 0 0, 0 100%, from(#303fb2), to(#2f70d4));
	}

	body{
		background-color: #FFFFFF;
	}
	.liBackground {
	     background: -webkit-gradient(linear, 0 0, 0 100%, from(#303fb2), to(#2f70d4));
	     color: -webkit-gradient(#ffffff);
	}
</style>

实现第三处，效果图如下：

不足之处，还请大家指点，加以改正。
欢迎大家留出宝贵意见 和 评论。
一个人几乎可以在任何他怀有无限热忱的事情上成功。——查尔斯·史考伯。