vue 表单绑定值 input绑定事件
vue 2017-11-14 09:57:03

vue关于表单绑定值，再提交给接口：

赋值 使用 :value

绑定值  会变化的 使用v-model

 

如：

XML/HTML Code复制内容到剪贴板
  1. <label>  
  2.     <h3>标题</h3>  
  3.     <input type="text" id="publish_title" v-model="publish_title">  
  4. </label>  
  5.   
  6.   
  7. <!--checkbox 绑定is_open，值为Y/N-->  
  8. <label>  
  9.     <span>公开</span>  
  10.     <span class="checked_w">  
  11.         <input type="radio" class="checkbox" name="is_open" value="Y" v-model="is_open">  
  12.         <i class="fa fa-check" aria-hidden="true"></i>  
  13.     </span>  
  14. </label>  
  15. <label>  
  16.     <span>私人</span>  
  17.     <span class="checked_w">  
  18.         <input type="radio" class="checkbox" name="is_open" value="N" v-model="is_open">  
  19.         <i class="fa fa-check" aria-hidden="true"></i>  
  20.     </span>  
  21. </label>  

 

获取input输入值给不同的判断：

XML/HTML Code复制内容到剪贴板
  1. <input type="number" v-on:input="checkGroupInput($event,$event.target.value)" >  

 

JavaScript Code复制内容到剪贴板
  1. checkGroupInput(event, value) {  
  2.     // 团购价格输入绑定事件  
  3.     //              value = Number(value);  
  4.       
  5. },  

 

 

v-on:focus=" "   //当元素获得焦点时，发生 focus 事件。
v-on:blur="" //当元素失去焦点时发生 blur 事件。

 

自定义指定之插入焦点

参考文档：https://cn.vuejs.org/v2/guide/custom-directive.html

XML/HTML Code复制内容到剪贴板
  1. <input type="text" @blur="focusState = false" v-focus="focusState">  
  2. <div @click="focusclick">按钮</div>  
  3.   
  4.   
  5. <script>  
  6. directives: {  
  7.     focus: {  
  8.       update: function (el, {value}) {  
  9.         if (value) {  
  10.           el.focus()  
  11.         }  
  12.       }  
  13.     }  
  14.   },  
  15. </script>  

 

 

 

 

 

 

本文来自于：http://www.yoyo88.cn/study/vue/203.html

上一篇 vue 表单验证
下一篇 vue demo详解
相关的文章
Powered by yoyo苏ICP备15045725号