ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
### 双向数据绑定: ~~~html <div id="app"> <p>原始文本信息:{{message}}</p> <h3>文本框</h3> <p>v-model:<input type="text" v-model="message"></p> </div> ~~~ ~~~javascript var app=new Vue({ el:'#app', data:{ message:'hello Vue!' } }) ~~~ ### 修饰符 * ` .lazy`:取代 imput 监听 change 事件。 * ` .number`:输入字符串转为数字。 * `.trim`:输入去掉首尾空格。 ### 文本区域加入数据绑定 ~~~html <textarea cols="30" rows="10" v-model="message"></textarea> ~~~ ### 多选按钮绑定一个值 ~~~html <h3>多选按钮绑定一个值</h3> <input type="checkbox" id="isTrue" v-model="isTrue"> <label for='isTrue'>{{isTrue}}</label> ~~~ ### 多选绑定一个数组 ~~~html <h3>多选绑定一个数组</h3> <p> <input type="checkbox" id="JSPang" value="JSPang" v-model="web_Names"> <label for="JSPang">JSPang</label><br/> <input type="checkbox" id="Panda" value="Panda" v-model="web_Names"> <label for="JSPang">Panda</label><br/> <input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names"> <label for="JSPang">PanPan</label> <p>{{web_Names}}</p> </p> ~~~ ### 单选按钮绑定数据 ~~~html <h3>单选按钮绑定</h3> <input type="radio" id="one" value="男" v-model="sex"> <label for="one">男</label> <input type="radio" id="two" value="女" v-model="sex"> <label for="one">女</label> <p>{{sex}}</p> ~~~