首页 > 其他分享 >v-model 创建双向绑定

v-model 创建双向绑定

时间:2023-02-07 23:11:36浏览次数:56  
标签:el Vue app 绑定 vm let 双向 new model

v-model 创建双向绑定

在表单 <input><textarea> 及<select>元素控件或者组件上创建双向绑定,它负责监听用户的输入事件以更新数据

1. 普通文本框


  1. <div id="app">
  2. <p>{{ msg }}</p>
  3. <input type="text" v-model="msg">
  4. </div>
  5. <script>
  6. let vm = new Vue({
  7. el: '#app',
  8. data: {
  9. msg: 123,
  10. },
  11. })
  12. </script>

2. 单选框


  1. <div id="app">
  2. <p>{{ sex }}</p>
  3. 男 <input type="radio" value="男" v-model="sex">
  4. 女 <input type="radio" value="女" v-model="sex">
  5. </div>
  6. <script>
  7. let vm = new Vue({
  8. el: '#app',
  9. data: {
  10. sex: 1,
  11. },
  12. })
  13. </script>

3. 复选框


  1. <div id="app">
  2. <p>{{ language }}</p>
  3. PHP <input type="checkbox" value="PHP" v-model="language">
  4. Java <input type="checkbox" value="Java" v-model="language">
  5. Python <input type="checkbox" value="Python" v-model="language">
  6. </div>
  7. <script>
  8. let vm = new Vue({
  9. el: '#app',
  10. data: {
  11. language: ['PHP']
  12. },
  13. })
  14. </script>

4. 多行文本框


  1. <div id="app">
  2. <p>{{ content }}</p>
  3. <textarea v-model="content"></textarea>
  4. </div>
  5. <script>
  6. let vm = new Vue({
  7. el: '#app',
  8. data: {
  9. content: 123
  10. },
  11. })
  12. </script>

5. 下拉选择框


  1. <div id="app">
  2. <p>{{ city }}</p>
  3. <select v-model="city">
  4. <option disabled value="">请选择</option>
  5. <option value="1">郑州</option>
  6. <option value="2">开封</option>
  7. <option value="3">南阳</option>
  8. </select>
  9. </div>
  10. <script>
  11. let vm = new Vue({
  12. el: '#app',
  13. data: {
  14. city: 2
  15. },
  16. })
  17. </script>

6. 修饰符 trim 清除两边的空格


  1. <div id="app">
  2. <p>{{ content.length }}</p>
  3. <input type="text" v-model.trim="content">
  4. </div>
  5. <script>
  6. let vm = new Vue({
  7. el: '#app',
  8. data: {
  9. content: ''
  10. },
  11. })
  12. </script>

 

站长百科网

标签:el,Vue,app,绑定,vm,let,双向,new,model
From: https://www.cnblogs.com/10zhan/p/17100128.html

相关文章