How to use Vue.js form controls-JS Tutorial-php.cn

How to use Vue.js form controls

php中世界最好的语言

Release： 2018-05-03 09:39:39

Original

1249 people have browsed it

This time I will show you how to use the Vue.js form control, and what are the precautions when using the Vue.js form control. The following is a practical case, let's take a look.

Concept Description

v-model directive: Creates a two-way data binding on a form control element. 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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 </title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<p id="app">
 <p>input 元素：</p>
 <input v-model="message" placeholder="编辑我……">
 <p>消息是: {{ message }}</p>
 <p>textarea 元素：</p>
 <p style="white-space: pre">{{ message2 }}</p>
 <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
</p>
<script>
new Vue({
 el: '#app',
 data: {
 message: 'php中文网',
 message2: 'www.php.cn'
 }
})
</script>
</body>
</html>

Copy after login

Checkbox

If the checkbox is single, it is logical Values, if multiple, are bound to the same array:

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<p id="app">
 <p>单个复选框：</p>
 <input type="checkbox" id="checkbox" v-model="checked">
 <label for="checkbox">{{ checked }}</label>
 <p>多个复选框：</p>
 <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
 <label for="runoob">Runoob</label>
 <input type="checkbox" id="google" value="Google" v-model="checkedNames">
 <label for="google">Google</label>
 <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
 <label for="taobao">taobao</label>
 <br>
 <span>选择的值为: {{ checkedNames }}</span>
</p>
<script>
new Vue({
 el: '#app',
 data: {
 checked : false,
 checkedNames: []
 }
})
</script>
</body>
</html>

Copy after login

Radio button

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<p id="app">
 <input type="radio" id="runoob" value="Runoob" v-model="picked">
 <label for="runoob">PHP</label>
 <br>
 <input type="radio" id="google" value="Google" v-model="picked">
 <label for="google">Google</label>
 <br>
 <span>选中值为: {{ picked }}</span>
</p>
<script>
new Vue({
 el: '#app',
 data: {
 picked : 'PHP'
 }
})
</script>
</body>
</html>

Copy after login

Drop-down list

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 </title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<p id="app">
 <select v-model="selected" name="fruit">
 <option value="">选择一个网站</option>
 <option value="www.PHP.cn">php</option>
 </select>
 <p id="output">
 选择的网站是: {{selected}}
 </p>
</p>
<script>
new Vue({
 el: '#app',
 data: {
 selected: '' 
 }
})
</script>
</body>
</html>

Copy after login

Modifiers

.lazy

By default, v-model is synchronized in the input event The value and data of the input box, but you can add a modifier lazy to synchronize it in the change event:

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

Copy after login

.number

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

<input v-model.number="age" type="number">

Copy after login

This is usually useful, because type="number " The value entered in HTML will always be returned as a string type.
.trim

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

<input v-model.trim="msg">

Copy after login

I believe I read it You have mastered the method in the case of this article. For more exciting information, please pay attention to other related articles on the php Chinese website!