说明

image.png
image.png

image.png

原理

image.png

支持的表单元素

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>Document</title>
  8. </head>
  9. <body>
  11.   <div id="app"></div>
  13.   <template id="my-app">
  14.     <!-- 1.绑定textarea -->
  15.     <label for="intro">
  16.       自我介绍
  17.       <textarea name="intro" id="intro" cols="30" rows="10" v-model="intro"></textarea>
  18.     </label>
  19.     <h2>intro: {{intro}}</h2>
  21.     <!-- 2.checkbox -->
  22.     <!-- 2.1.单选框 -->
  23.     <label for="agree">
  24.       <input id="agree" type="checkbox" v-model="isAgree"> 同意协议
  25.     </label>
  26.     <h2>isAgree: {{isAgree}}</h2>
  28.     <!-- 2.2.多选框 -->
  29.     <span>你的爱好: </span>
  30.     <label for="basketball">
  31.       <input id="basketball" type="checkbox" v-model="hobbies" value="basketball"> 篮球
  32.     </label>
  33.     <label for="football">
  34.       <input id="football" type="checkbox" v-model="hobbies" value="football"> 足球
  35.     </label>
  36.     <label for="tennis">
  37.       <input id="tennis" type="checkbox" v-model="hobbies" value="tennis"> 网球
  38.     </label>
  39.     <h2>hobbies: {{hobbies}}</h2>
  41.     <!-- 3.radio -->
  42.     <span>你的爱好: </span>
  43.     <label for="male">
  44.       <input id="male" type="radio" v-model="gender" value="male">男
  45.     </label>
  46.     <label for="female">
  47.       <input id="female" type="radio" v-model="gender" value="female">女
  48.     </label>
  49.     <h2>gender: {{gender}}</h2>
  51.     <!-- 4.select -->
  52.     <span>喜欢的水果: </span>
  53.     <select v-model="fruit" multiple size="2">
  54.       <option value="apple">苹果</option>
  55.       <option value="orange">橘子</option>
  56.       <option value="banana">香蕉</option>
  57.     </select>
  58.     <h2>fruit: {{fruit}}</h2>
  59.   </template>
  61.   <script src="https://unpkg.com/vue@next"></script>
  62.   <script>
  63.     const App = {
  64.       template: '#my-app',
  65.       data() {
  66.         return {
  67.           intro: "Hello World",
  68.           isAgree: false,
  69.           hobbies: ["basketball"],
  70.           gender: "",
  71.           fruit: "orange" // 多选就会变数组
  72.         }
  73.       },
  74.       methods: {
  75.         commitForm() {
  76.           axios
  77.         }
  78.       }
  79.     }
  81.     Vue.createApp(App).mount('#app');
  82.   </script>
  83. </body>
  84. </html>

image.pngimage.png

components 组件模版

值绑定

image.png
对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是固定的字符串 或 布尔值，但是v-model可以更改这些固定的值。

比如单选框选中就是true，没选中就是false。现在可以通过绑定一个值，改变这个默认，选中就是A，没选中就是B

  1. <template>
  2.   <div>
  3.     <div v-for="(item, index) of options">
  4.       <input :id="options[index].text" type="radio" v-model="inputed" v-bind:value="options[index].value" />
  5.       <label :for="options[index].text">{{ options[index].text }}</label>
  6.     </div>
  7.     <br />
  8.     <span>动态选项: {{ inputed }}</span>
  9.   </div>
  10. </template>
  12. <script>
  13. export default {
  14.   data() {
  15.     return {
  16.       inputed: '',
  17.       options: [
  18.         { text: 'One', value: 'A' }, 
  19.         { text: 'Two', value: 'B' },
  20.       ]
  21.     };
  22.   }
  23. };
  24. </script>

修饰符

.lazy 不实时更新

image.png

.number 转换成数字

image.png

.trim 过滤首尾空白字符

image.png

======================

源码实现

image.png