Detailed explanation of Vue two-way data binding examples

This time I will bring you a detailed explanation of Vue two-way data binding examples. What are the precautions for Vue two-way data binding? The following is a practical case, let's take a look.

Concept Description

v-model directive: Creates two-way data binding on form control elements. v-model will automatically choose the correct method to update the element based on the control type.

Input box

The example demonstrates the use of v-model in the input and textarea elements to achieve bidirectionality Data binding:

HTML

nbsp;html>


<meta>
<title>Vue双向数据绑定实例详解</title>
<script></script>


<p>
 </p><p>input 元素：</p>
 <input>
 <p>消息是: {{ message }}</p>
 <p>textarea 元素：</p>
 <p>{{ message2 }}</p>
 <textarea></textarea>

<script>
new Vue({
 el: &#39;#app&#39;,
 data: {
 message: &#39;Runoob&#39;,
 message2: &#39;菜鸟教程\r\nhttp://www.runoob.com&#39;
 }
})
</script>

The effect is as shown in the figure:

Complex Check box

If the check box is a single one, it is a logical value. If there are multiple check boxes, it is bound to the same array:

HTML

nbsp;html>


<meta>
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script></script>


<p>
 </p><p>单个复选框：</p>
 <input>
 <label>{{ checked }}</label>
 <p>多个复选框：</p>
 <input>
 <label>Runoob</label>
 <input>
 <label>Google</label>
 <input>
 <label>taobao</label>
 <br>
 <span>选择的值为: {{ checkedNames }}</span>

<script>
new Vue({
 el: &#39;#app&#39;,
 data: {
 checked : false,
 checkedNames: []
 }
})
</script>

The effect is as shown:

Radio button

##HTML

nbsp;html>


<meta>
<title>Vue 测试实例</title>
<script></script>


<p>
 <input>
 <label>Runoob</label>
 <br>
 <input>
 <label>Google</label>
 <br>
 <span>选中值为: {{ picked }}</span>
</p>
<script>
new Vue({
 el: &#39;#app&#39;,
 data: {
 picked : &#39;Runoob&#39;
 }
})
</script>

The effect is as shown:

drop-down list

HTML

nbsp;html>


<meta>
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script></script>


<p>
 <select>
 <option>选择一个网站</option>
 <option>Runoob</option>
 <option>Google</option>
 </select>
 </p><p>
 选择的网站是: {{selected}}
 </p>

<script>
new Vue({
 el: &#39;#app&#39;,
 data: {
 selected: &#39;&#39; 
 }
})
</script>

The effect is as shown:

##Modifier.lazy

By default, v-model synchronizes the value and data of the input box in the input event, but you can add a modifier lazy to switch to synchronization in the change event:

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input>

.number

If you want to automatically convert the user's input value to the Number type (if the conversion result of the original value is NaN, the original value will be returned), you can add a modifier number to v-model To handle input values:

<input>

This is often useful because input values ​​in HTML will always be returned as string types when type="number".

.trim

If you want to automatically filter the leading and trailing spaces input by the user, you can add the trim modifier to v-model to filter the input:

<input>

I believe you have mastered it after reading the case in this article. Method, for more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Using Koa2 to implement file upload and download

Convert the html string to HTML tags and use

The above is the detailed content of Detailed explanation of Vue two-way data binding examples. For more information, please follow other related articles on the PHP Chinese website!