v-model的radio checkbox以及键盘修饰符使用

 <div id ="app"> 
       
  <input type="text"  :value="msg" @input="(e)=>(msg=e.target.value)">  
   <input type ="text" v-model="msg">
               {{msg}}
               
          <--radio可以根据v-model来进行分组-->

    男：  <input type="radio" v-model="radioValue" value="男">  
    女：  <input type="radio" v-model="radioValue" value="女">      
   			 {{radioValue}}                
</div>
    <script src="node_modules/vue/dist/vue.js"> </script>
         <script> 
   			 let vm = new Vue({
                				  data:{ 
                 		        msg:'hello',
                 		        radioValue:'男'，
                   				       },
       			     methods:{
       			     
	                         }
                    }).$mount('#app');
        </script>

V-model的checkbox使用

                    <div id ="app"> 
       
  <input type="text"  :value="msg" @input="(e)=>(msg=e.target.value)">  
   
  <input type ="text" v-model="msg">
                    {{msg}}
    
     <!-- 全选多选用true false -->
      LOL<input type="checkbox" v-model="checkValues" value="LOL">
      游泳:<input type="checkbox" v-model="checkValues" value="游泳">
      健身:<input type="checkbox" v-model="checkValues" value="健身">
        {{checkValues}}

</div>
    <script src="node_modules/vue/dist/vue.js"> </script>
    <script> 
    let vm = new Vue({
               data:{ 
               msg:'hello',
               checkValues:[],     //用这个时 多选，选中内容全部显示在【】内
                                  
        					     //checkValue:true,     全选时用true  用ture的时候点一个三个全选
               
                          },
            methods:{
                 /*  fn(e){    
                        this.msg=e.target.value      //这两行 到上面去了
                 }    */
                    }
                    }).$mount('#app');
           </script>

鼠标修饰符使用

<div id ="app"> 
       
  <input type="text" @keyup.enter="fn">    
    
     <!--keyup键盘抬起时触发fn方法 fn方法写在下文methods中  
             若是想修改按下某个键位时触发 则 @keyup.键位="fn"  
       如 @keyup=enter="fn"   在按下enter键时 触发下方methods方法 弹出1  
                  常见的有.ctrl .esc .enter  -->
</div>

    <script src="node_modules/vue/dist/vue.js"> </script>
   <script> 
    let vm = new Vue({
                  data:{ 
                         msg:'',
                                          
                          },
            methods:{  
                        fn(e,a){
                          alert(1)
                        }
                 /*  fn(e){    
                        this.msg=e.target.value      //这两行 到上面去了
                 }    */
                    }
                    }).$mount('#app');

      
 
      </script>