Detailed explanation of vue form use cases

This time I will bring you a detailed explanation of the use case of vue form. What are the precautions when using vue form. The following is a practical case, let's take a look.

1. Basic Usage

You can use the v-model command to create a bidirectional form on the and elements. <a href="http://www.php.cn/code/7876.html" target="_blank">Data binding</a>. </p> <p style="text-align: left;">But v-model is essentially just syntactic sugar. It is responsible for listening to user input events to update data and perform some special processing for some extreme scenarios. </p> <p style="text-align: left;">v-model will ignore the initial values ​​of the value, checked, and selected attributes of all form elements and always use the data of the Vue instance as the data source. You should declare the initial value in the component's data option via <a href="http://www.php.cn/wiki/48.html" target="_blank">JavaScript</a>. </p> <p style="text-align: left;">A set of codes, after reading the basic usage of text, textarea, radio, checkbox, and select: </p> <pre class="brush:php;toolbar:false"><p id="app7">   <input type="text" v-model="message"><label>{{message}}</label></br>   <textarea v-model="message1"></textarea><label>{{message1}}</label></br>   <!--单选按钮在单独使用时,不需要v-model,直接使用v-bind 绑定一个布尔类型的值,为真时选中,为否时不选-->   <input type="radio" :checked="picked"><label>单选按钮</label></br>   <!--如果是组合使用来实现互斥选择的效果,就需要v-model 配合value来使用：-->   <input type="radio" v-model="sex" value="boy"><label>男</label>   <input type="radio" v-model="sex" value="girl"><label>女</label></br>   <!--复选框使用数组类型的数据匹配-->   <input type="checkbox" v-model="hobby" value="跑步"><label>跑步</label>   <input type="checkbox" v-model="hobby" value="爬山"><label>爬山</label>   <input type="checkbox" v-model="hobby" value="滑雪"><label>滑雪</label></br>   <!--单选时的选择框,多选时加multiple属性就可以了-->   <!--但我们一般都不用原生的这种下拉框，不美观，扩展功能也不好，一般会用插件或自己封装一个-->   <select v-model="select">    <option disabled value="">请选择</option>    <option>html</option>    <option value="js">javascript</option>    <option>css</option>   </select>   <!--用 v-for 渲染的动态选项-->   <select v-model="selected">    <option v-for="option in options" :value="option.value">     {{option.text}}    </option>   </select>  </p> var app7 = new Vue({  el: '#app7',  data:{   message: '单行文本',   message1: '多行文本',   picked: true,   sex: 'boy',   hobby: ['爬山','滑雪'],   select: 'css',   selected: 'A',   options: [    { text: 'One', value: 'A' },    { text: 'Two', value: 'B' },    { text: 'Three', value: 'C' }   ]  } });</pre> <p style="text-align: left;"><span style="color: #ff0000"><strong>2. Value binding</strong></span></p> <p style="text-align: left;">When radio buttons, check boxes and selection lists are used alone or in radio selection mode, the value bound by v-model is a static string or Boolean value, but in business, sometimes binding is required A dynamic data can be implemented using v-bind. </p> <p style="text-align: left;">A set of codes, after reading the commonly used value bindings of radio, checkbox, and select in forms: </p> <pre class="brush:php;toolbar:false"> <p id="app8">   <!--单选按钮,利用value动态绑定，在选中时，app.picked === app.value, 值都是boy-->   <input type="radio" v-model="picked" :value="value">   <label>单选按钮</label>   <p>{{picked}}</p>   <p>{{value}}</p>   <!--复选框,利用true-value与false-value动态绑定,勾选时,app.toggle == app.value1; 未勾选时，app.toggle == app.value2-->   <input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">   <label>复选框</label>   <p>{{toggle}}</p>   <p>{{value1}}</p>   <p>{{value2}}</p>   <!--选择列表,当选中时,app.selected 是一个Object ，所以app.selected.number == 123-->   <select v-model="selected">    <option :value="{number:123}">123</option>   </select>   {{selected.number}}  </p> var app8 = new Vue({  el: '#app8',  data:{   picked: false,   value: 'boy',   toggle: false,   value1: 'a',   value2: 'b',   selected: ''  } });</pre> <p style="text-align: left;"><span style="color: #ff0000"><strong>3. Modifiers</strong></span></p> <p style="text-align: left;"> Similar to event modifiers, v-model also has modifiers to control the timing of data synchronization. </p> <p style="text-align: left;">A set of codes, after reading the commonly used modifiers lazy, number, and trim</p> <pre class="brush:php;toolbar:false"><p id="app9">   <!-- .lazy: 在输入框中， v-model 默认是在input 事件中同步输入框的数据（除了提示中介绍的中文输入法情况外）， 使用修饰符.lazy 会转变为在change 事件中同步，这时，message 并不是实时改变的，而是在失焦或按回车时才更新。-->   <input type="text" v-model.lazy="message">   <p>{{message}}</p>   <!--.number: 使用修饰符.number 可以将输入转换为Number 类型，否则虽然你输入的是数字，但它的类型其实是String ，比如在数字输入框时会比较有用-->   <input type="text" v-model.number="number">   <p>{{typeof number}}</p>   <!-- .trim: 修饰符.trim 可以自动过滤输入的首尾空格-->   <input type="text" v-model="text">   <p>{{text}}</p>  </p> var app9 = new Vue({  el: '#app9',  data:{   message: '',   number: '',   text: ''  } });</pre> <p> I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website! </p> <p>Recommended reading: </p> <p><a href="http://www.php.cn/js-tutorial-398544.html" target="_blank">How to correctly solve cross-domain problems in Vue projects</a><br></p> <p><a href="http://www.php.cn/js-tutorial-398541.html" target="_blank">How to use vue-cli axios Request method and cross-domain processing</a><br></p><p>The above is the detailed content of Detailed explanation of vue form use cases. For more information, please follow other related articles on the PHP Chinese website!</p></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="How to get and modify input text box data using JS" href="https://m.php.cn/faq/398563.html">How to get and modify input text box data using JS</a></span><span>Next article：<a class="dBlack" title="How to get and modify input text box data using JS" href="https://m.php.cn/faq/398565.html">How to get and modify input text box data using JS</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="https://m.php.cn/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/faq/1609.html" title="An in-depth analysis of the Bootstrap list group component" class="aBlack">An in-depth analysis of the Bootstrap list group component</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/1640.html" title="Detailed explanation of JavaScript function currying" class="aBlack">Detailed explanation of JavaScript function currying</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/1949.html" title="Complete example of JS password generation and strength detection (with demo source code download)" class="aBlack">Complete example of JS password generation and strength detection (with demo source code download)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/2248.html" title="Angularjs integrates WeChat UI (weui)" class="aBlack">Angularjs integrates WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/faq/2351.html" title="How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills" class="aBlack">How to quickly switch between Traditional Chinese and Simplified Chinese with JavaScript and the trick for websites to support switching between Simplified and Traditional Chinese_javascript skills</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Public welfare online PHP training，Help PHP learners grow quickly！</p></div><div class="footermid"><a href="https://m.php.cn/about/us.html">About us</a><a href="https://m.php.cn/about/disclaimer.html">Disclaimer</a><a href="https://m.php.cn/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了，就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body><!-- Matomo --><script> var _paq = window._paq = window._paq || []; /* tracker methods like "setCustomDimension" should be called before "trackPageView" */ _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="https://tongji.php.cn/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '9']); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script><!-- End Matomo Code --></html>