语法实现：

v-bind="" : 根据属性的true和false来决定显示样式

        <!-- 加样式： v-bind:样式":属性}" -->

<!-- 例1 -->
<span v-bind: >{{ username_info }}</span>

<!-- 例2 -->
<button v-bind: >用户名</button>
<button v-bind:>验证码</button>


    

v-if="" : 判断语句，存在于template中，""可用来控制整个页面的显示状态，可以在点击事件里面的属性修改该属性状态

        <p v-if="is_login">{{ username }}</p>
<p v-else  v-on:click="go_login()">登录</p>
<div v-if="!is_login"  v-on:click="go_register()">注册</div>

ps: 
	拿is_login属性举个栗子.
	如果is_login属性为true, 则显示{{nsername}}
	如果is_login为Flase,则同时显示登陆和注册两个模块

    

v-model="1" : 属性绑定，全局通用

        data: function(){
	// 主页面显示的所有的数据
    return{
		1:"",
		2:"",
		3:"",
		4:"",
	}
}

    

v-on:click ="1()": 点击事件, 1,2,3表示不同的点击事件

        methods:{
	1: function(){
        // 可对应页面上的所有属性，可利用此点击事件控制整个页面的状态
		属性;
	},
	2: function(){
        // 跳转到另一个html页面
        this.$router.push({path: "/login"})
    },
	3: function(){
        // 涉及后台数据的时候，要用axjx调用后台数据
        this.axios.post("后端接口",{属性}).then(response =>{打印response，属性})
    }
	
}

    

原文：https://www.cnblogs.com/lance-lzj/p/13922764.html