<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ margin-bottom: 30px; } </style> <script src="js/vue.js"></script> <script src="js/jquery-1.12.3.min.js"></script></head><body> 1.基础用法 你可以用 v-model 指令在表单控件元素上创建双向数据绑定。 它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇， 但 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。 ！important v模型将忽略初始值,检查或选定的属性上发现任何形式的元素。 它总是把Vue实例数据作为真理的源泉。你应该声明JavaScript一侧的初始值,在选择组件的数据。 ！important 对于需要输入法编辑器的语言（中文、日文、韩文等），要注意的是， 在 IME 字母组合窗口输入时 v-model 并不会更新。如果你想在此期间满足更新需求，请使用 input 事件。<br> <br> 1.1文本 <div id="demo1"> <input v-model="message" placeholder="编辑我"> <p>messages is {{message}}</p> </div> 1.2多行文本 <div id="demo2"> <span>多行文本是：</span> <p style="white-space: pre">{{message}}</p> <br> <textarea v-model="message" placeholder="添加多个行"></textarea> </div> !important 在文本区域插值( <textarea></textarea> ) 并不会生效，应用 v-model 来代替<br> <br> 1.3复选框 <div id="demo3"> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> </div> 多个勾选框，绑定到同一个数组：<br> <br> <div id="demo4"> <input type="checkbox" id="jack" value="孙悟空" v-model="checkedNames"> <label for="jack">孙悟空</label> <input type="checkbox" id="john" value="八戒" v-model="checkedNames"> <label for="john">八戒</label> <input type="checkbox" id="mike" value="沙和尚" v-model="checkedNames"> <label for="mike">沙和尚</label> <br> <span>Checked names: {{ checkedNames }}</span> </div> 1.4单选 <div id="demo5"> <input type="radio" in="one" value="1" v-model="picked"> <label for="one">1</label> <input type="radio" in="two" value="2" v-model="picked"> <label for="one">2</label> <br> <span>picked:{{picked}}</span> </div> 1.5选择列表 select <h3>单选列表</h3> <div id="demo6"> <select v-model="selected"> <option disabled value="">选一个大兄弟</option> <option>a</option> <option>b</option> <option>c</option> </select> <span>selceted:{{selected}}</span> </div> 如果你v模型的初始值表达式不匹配的任何选项,<!--<select>-->元素将会呈现在一个“没有选择”状态。 在iOS这将导致用户无法选择第一项,因为iOS不火改变事件在这种情况下。 因此建议禁用选项提供一个空值,显示在上面的例子中。<br> <br> <h3>多选列表</h3> <div id="demo7"> <select v-model="selected" multiple="multiple" style="width:50px;"> <option>a</option> <option>b</option> <option>c</option> </select> <span>selceted:{{selected}}</span> </div> <h3>动态选项，用 v-for 渲染：</h3> <div id="demo8"> <select v-model="selected"> <option v-bind:class="option.class" v-for="option in options" v-bind:value="option.value">{{option.text}}</option> </select> <span>Selected: {{ selected }}</span> </div> <script> var demo1 = new Vue({ el:"#demo1", data:{ message:‘‘ } }); var demo2 = new Vue({ el:"#demo2", data:{ message:‘‘ } }); var demo3 = new Vue({ el:"#demo3", data:{ checked:‘true‘ } }); var demo4 = new Vue({ el:‘#demo4‘, data:{ checkedNames:[] } }); var demo5 = new Vue({ el:‘#demo5‘, data:{ picked:‘‘ } }); var demo6 = new Vue({ el:‘#demo6‘, data:{ selected:‘‘ } }); var demo7 = new Vue({ el:‘#demo7‘, data:{ selected:[] } }); var demo8 = new Vue({ el:‘#demo8‘, data:{ selected:‘A‘, options:[ {text:‘one‘,value:"a",class:‘option-01‘}, {text:‘two‘,value:"b",class:‘option-02‘}, {text:‘three‘,value:"c",class:‘option-03‘} ] } }); </script></body></html>
时间： 2024-10-12 13:20:26