v-model指令

　　在Vue.js文档中时这么定义的：一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突：

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

一个简单的数据双向绑定

html：

<div id="app">
    <p>原始文本信息：{{message}}</p>
    <h3>文本框</h3>
    <p>v-model:<input type="text" v-model="message"></p>
</div>

js：

var app=new Vue({
  el:'#app',
  data:{
       message:'hello Vue!'
  }
 })

同时对于v-model有一些修饰符：

.lazy：取代 imput 监听 change 事件。
.number：输入字符串转为数字。
.trim：输入去掉首尾空格。

在文本框加入数据绑定

<textarea  cols="30" rows="10" v-model="message"></textarea>

多选框绑定一个值

<input type="checkbox" id="isTrue" v-model="isTrue">
<label for='isTrue'>{{isTrue}}</label>

多选绑定一个数组

<input type="checkbox" id="checkbox1" value="xiaofan" v-model="web_name">
<label for="checkbox1"> xiaofan </label>
<input type="checkbox" id="checkbox2" value="xiaoqiao" v-model="web_name">
<label for="checkbox2"> xiaoqiao </label>
<input type="checkbox" id="checkbox3" value="blue" v-model="web_name">
<label for="checkbox3"> blue </label> <br>

单选按钮绑定值

<input type="radio" id="male" value="男" v-model="sex">
<label for="male"> 男 </label>
<input type="radio" id="female" value="女" v-model="sex">
<label for="female"> 女 </label>
<p>
    你的性别是：{{sex}}
</p>

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-model 实例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-model 实例</h1>
    <hr>

    <div id="app">
       <p> 原始文本信息：{{message}} </p> 
       <h3>文本框</h3>
       <p> v-model: <input type="text" v-model="message"> </p>
       <p> v-model.lazy: <input type="text" v-model.lazy="message"> </p>
       <p> v-model.num: <input type="text" v-model.num="message"> </p>
       <p> v-model.trim: <input type="text" v-model.trim="message"> </p>
       <hr>
        <h3>文本域</h3>
        <textarea  cols="30" rows="10" v-model="message"></textarea>  
        <hr>
        <h3>多选框绑定一个值</h3>
        <input type="checkbox" id="istrue" v-model="istrue" >
        <label for="istrue"> {{istrue}} </label>
        <hr>
        <h3>多选框绑定多个值</h3>
        <input type="checkbox" id="checkbox1" value="xiaofan" v-model="web_name">
        <label for="checkbox1"> xiaofan </label>
        <input type="checkbox" id="checkbox2" value="xiaoqiao" v-model="web_name">
        <label for="checkbox2"> xiaoqiao </label>
        <input type="checkbox" id="checkbox3" value="blue" v-model="web_name">
        <label for="checkbox3"> blue </label> <br>
        <p>
            {{web_name}}
        </p>
        <hr>
        <h3>单选框绑定值</h3>
        <input type="radio" id="male" value="男" v-model="sex">
        <label for="male"> 男 </label>
        <input type="radio" id="female" value="女" v-model="sex">
        <label for="female"> 女 </label>
        <p>
            你的性别是：{{sex}}
        </p>

    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data:{
                message:"Hello World!",
                istrue:true,
                web_name:[],
                sex:"",
            }
        })
    </script>
</body>
</html>

Vue2.0 的漫长学习ing-6

v-model指令

一个简单的数据双向绑定

猜你喜欢