<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>vue</title> <link rel="stylesheet" href=""> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- <script type="text/javascript" src="../js/vue.js"></script> --> <style type="text/css"> .test{ background-color:yellow; } .test2{ font-size: 40px; } .green{ color: green; } </style> </head> <body> <div id="vue"> <h1 class="green" :class="hd">测试一下</h1> <input type="checkbox" v-on:click="test1()">is_test <input type="checkbox" >is_test2 <form action="" @submit="getinputval"> <!--绑定后,input里的值的变化,会赋值给下面data里的inputval/inputval2--> <input type="text" v-model="inputval" placeholder="请输入内容"> <input type="text" v-model="inputval2" placeholder="请输入内容"> <input type="submit" value="提交"> </form> </div> </body> <script type="text/javascript"> var app=new Vue({ el:'#vue', computed:{ }, data:{ // 这里的test,test2, green 指的是上面的style样式 hd:{test:false,test2:false,green:false}, a:123, inputval:'', inputval2:'', }, methods:{ test1:function(){ console.log(this.a); this.hd.test=true; this.hd.test2=true; this.hd.green=true; }, getinputval(e){ alert(this.inputval); alert(this.inputval2); e.preventDefault(); //阻止默认提交时刷新表单 } } }); </script> </html> 