您的位置：首页 > 产品设计 > UI/UE

VUE指令-数据绑定v-model

2017-12-27 21:52 706 查看
用 
v-model
 指令在表单 
<input>
 及 
<textarea>
 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 
v-model
 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model
 会忽略所有表单元素的 
value
、
checked
、
selected
 特性的初始值而总是将
Vue 实例的数据作为数据来源。你应该通过 JavaScript
在组件的 
data
选项中声明初始值。

VUE框架数据绑定模型(MVVM)
v-model: "xxx" 文本输入框

<!-- 文本输入框<input/> -->

<!-- 格式v-model="变量" -->

<div style="height: 150px;background: #CCC;margin: 5px;">

     <div style="font-size: 20px;">

         v0.文本输入框</div>

     <hr />

     <div>

         <div>

              <input v-model="v0_message" style="font-size: 20px;"></input>

              <p>{{v0_message}}</p>

         </div>

     </div>

</div>

v-model: "xxx" 多行文本输入

<!-- 多行文本输入框<textarea/> -->

<!-- 格式v-model="变量" -->

<div style="height: 150px;background: #CCC;margin: 5px;">

     <div style="font-size: 20px;">

         v1.多行文本</div>

     <hr />

     <div>

         <div>

              <textarea v-model="v0_message" placeholder="place holder text" style="font-size: 20px;"></textarea>

              <p>{{v0_message}}</p>

         </div>

     </div>

</div>

v-model: "xxx" 复选框

<!-- 复选框<input type="checkbox"/> -->

<!-- 格式v-model="变量" -->

<div style="height: 150px;background: #CCC;margin: 5px;">

     <div style="font-size: 20px;">

         v2.复选框</div>

     <hr />

     <div>

         <div>

              <input type="checkbox" v-model="v1_bool" style="font-size: 20px;"></input>

              <p>{{v1_bool}}</p>

         </div>

     </div>

</div>

v-model: "xxx" 多个复选框

<!-- 多个复选框<input type="checkbox"/> -->

<!-- 格式v-model="变量" -->

<div style="height: 150px;background: #CCC;margin: 5px;">

     <div style="font-size: 20px;">

         v3.多个复选框</div>

     <hr />

     <div>

         <div>

              <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">

              <label for="jack">Jack</label>

              <input type="checkbox" id="john" value="John" v-model="checkedNames">

              <label for="john">John</label>

              <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">

              <label for="mike">Mike</label>

              <br>

              <span>Checked names: {{ checkedNames }}</span>

         </div>

     </div>

</div>

v-model: "xxx" 单选按钮

<!-- 单选按钮<input type="radio"/> -->

<!-- 格式v-model="变量" -->

<div style="height: 150px;background: #CCC;margin: 5px;">

     <div style="font-size: 20px;">

         v4.单选按钮</div>

     <hr />

     <div>

         <div>

              <input type="radio" id="one" value="One" v-model="picked">

              <label for="one">One</label>

              <br>

              <input type="radio" id="two" value="Two" v-model="picked">

              <label for="two">Two</label>

              <br>

              <span>Picked: {{ picked }}</span>

         </div>

     </div>

</div>

v-model: "xxx" 选择框

<!-- 选择框<select/> -->

<!-- 格式v-model="变量" -->

<div style="height: 150px;background: #CCC;margin: 5px;">

     <div style="font-size: 20px;">

         v5.选择框</div>

     <hr />

     <div>

         <div>

              <select v-model="selected">

                   <option disabled value="">请选择</option>

                   <option>A</option>

                   <option>B</option>

                   <option>C</option>

              </select>

              <span>Selected: {{ selected }}</span>

         </div>

     </div>

</div>

其他用法

.lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步
(除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：
<!--
在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >
.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
<input v-model.number="age" type="number">
这通常很有用，因为即使在 type="number" 时，HTML
输入元素的值也总会返回字符串。
.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
<input v-model.trim="msg">
 <!DOCTYPE html>
<html style="height: 100%;">

<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../lib/vue.v2.5.12.js"></script>
<title>v-model</title>
</head>

<body style="height: 100%;">
<style>
.style0 {
font-size: 25px;
color: green;
}

.style1 {
background: gold;
}
</style>
<!--
VUE指令v-model数据绑定指令

REF: http://www.runoob.com/vue2/vue-forms.html https://cn.vuejs.org/v2/guide/forms.html
-->
<div id="appVue">
<!-- 选择框<select/> -->
<!-- 格式v-model="变量" -->
<div style="height: 150px;background: #CCC;margin: 5px;">
<div style="font-size: 20px;">
v5.选择框</div>
<hr />
<div>
<div>
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
</div>
</div>

<!-- 单选按钮<input type="radio"/> -->
<!-- 格式v-model="变量" -->
<div style="height: 150px;background: #CCC;margin: 5px;">
<div style="font-size: 20px;">
v4.单选按钮</div>
<hr />
<div>
<div>
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
</div>
</div>

<!-- 多个复选框<input type="checkbox"/> -->
<!-- 格式v-model="变量" -->
<div style="height: 150px;background: #CCC;margin: 5px;">
<div style="font-size: 20px;">
v3.多个复选框</div>
<hr />
<div>
<div>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
</div>
</div>

<!-- 复选框<input type="checkbox"/> -->
<!-- 格式v-model="变量" -->
<div style="height: 150px;background: #CCC;margin: 5px;">
<div style="font-size: 20px;">
v2.复选框</div>
<hr />
<div>
<div>
<input type="checkbox" v-model="v1_bool" style="font-size: 20px;"></input>
<p>{{v1_bool}}</p>
</div>
</div>
</div>

<!-- 多行文本输入框<textarea/> -->
<!-- 格式v-model="变量" -->
<div style="height: 150px;background: #CCC;margin: 5px;">
<div style="font-size: 20px;">
v1.多行文本</div>
<hr />
<div>
<div>
<textarea v-model="v0_message" placeholder="place holder text" style="font-size: 20px;"></textarea>
<p>{{v0_message}}</p>
</div>
</div>
</div>

<!-- 文本输入框<input/> -->
<!-- 格式v-model="变量" -->
<div style="height: 150px;background: #CCC;margin: 5px;">
<div style="font-size: 20px;">
v0.文本输入框</div>
<hr />
<div>
<div>
<input v-model="v0_message" style="font-size: 20px;"></input>
<p>{{v0_message}}</p>
</div>
</div>
</div>
</div>
<script>
new Vue({
el: "#appVue",
data: {
selected: '',
picked: '',
checkedNames: [],
v1_bool: false,
v0_message: "还没输入"
}
}

)
</script>
</body>

</html>
REF:
http://www.runoob.com/vue2/vue-forms.html https://cn.vuejs.org/v2/guide/forms.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  vue v-model
相关文章推荐
新的分享
章节导航