vue.js代码开发最常见的功能集合

####1：点击新增按钮跳出新页面

<span class="inquire" @click="addNew">新增</span>

在方法中，添加这个方法即可

 addNew()
            {
                this.$router.push({ name: "newMember" });
            },

完整代码

<template>
<span class="inquire" @click="addNew">新增</span>
</template>

<script>
export default {
        data() {
            return {               
            }
        },
        methods: {

             addNew()
            {
                this.$router.push({ name: "newMember" });
            },
        }

    }
</script>

###2:实现一个简单的搜索框

<template>
     <div class="search">
          <mt-search v-model="value"  :result="filterResult"></mt-search>
       </div>  
</template>

###3：点击开关按钮

<template>
      <div class="chooseOne">
             <mt-switch v-model="value1" ></mt-switch>
           </div>
</template>

<script>
export default {
        data() {
            return {  
            	 value1:false,
            }
        },
        methods: {

        }

    }
</script>

####4：点击按钮，弹出提示弹框 按需引入弹框插件import {MessageBox} from 'mint-ui';

<template>
      <button @click="goChongZhiPage">充 值</button>
</template>

<script>
	import {MessageBox} from 'mint-ui';
	
export default {
        data() {
            return {              	
            }
        },
        methods: {
        	 // 跳转到充值页面
          goChongZhiPage ()
          {     
            MessageBox.confirm("",{
                    title: '提示',
                    message: '请先选择会员再进行充值',
                    showCancelButton: false
                })         
          },
        }
    }
</script>

####5：Toast功能 点击按钮，有两秒钟的提示成功的信息，import { Toast } from 'mint-ui';导入Toast功能

<template>
   <button @click="chongZhiForMember">充 值</button>
</template>
<script>
import { Toast } from 'mint-ui';
export default {
  data() {
    return { 
    };
  },
 
  methods: {
    chongZhiForMember()
            {
                 Toast({
                        message: '充值成功',
                        duration: 2000
                    });
            } 
  },
};
</script>

###6:vue最简单的tab点击切换效果

<template>
	<div>
		<div v-for="(list,index) in typeList" class="aa" :class="{ red:changeRed == index}" @click="change(index)">{{list.a}}</div>
	</div>
</template>

<script>
	/*import headerTo from "../common/headerTo";
	import { MessageBox, Toast, Field } from "mint-ui";
	import axios from "axios";
	import global from "../../../static/js/global";
	import config from "../../../static/js/config";
	import { error } from 'util';*/

	export default {
		data() {
			return {
				typeList: [
					{ "a": "增加积分" },
					{ "a": "扣除积分" },
					{ "a": "积分清零" },
					{ "a": "查看积分" },

				],
				changeRed: -1
			}
		},
		methods: {
			change(index) {
				this.changeRed = index;
			}
		}

	}
</script>

<style>
	.aa {
		cursor: pointer;
		width: 24%;
		height: 40px;
		line-height: 40px;
		float: left;
		text-align: center;
		font-size: 16px;
		border: 1px solid #D6D6D6;
	}
	
	.red {
		color: red;
	}
</style>

###7:提示弹框中带有若干行字

<template>
	<div class="app">
    <span class="inquire" @click="submitOne">开通</span>
	</div>
</template>

<script>
	import { Field, MessageBox, Toast } from 'mint-ui';
	export default {
		data() {
			return {
			}
		},
		methods: {
			submitOne() {
				MessageBox.confirm("<div>王小婷（16834562345）是否</div><div>开通VIP3会员卡</div><div>会员卡号：YYK 1234 1234 09</div>").then(action => {
					console.log(this.member);

				});
			},
		},

	}
</script>
<style scoped>
	.app {
		background: #F1F1F1;
		height: 17.78rem;
	}
	.inquire {
		font-size: 0.43rem;
	}
</style>