vue -model

1. v-model：监听表单（input,textarea,selector）value.

2. label不知道你有没有这样的体验，我明明没有点用户名输入框，而仅仅是点了“用户名”三个字，然后就直接到了用户名的输入框聚焦.

3. label和label for 有什么关系吗? label包括起来和label for 效果是一样的，后者采用id 作为绑定.

我相信，聪明的你已经看出来了.

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <!-- Step1.对于vue,可以用cdn -->

     <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>

     <style>

         #app div{

             padding: 2%;

             margin-bottom: 1%;

             border-bottom: 1px solid #ddd;

             background-color: blanchedalmond;

         }

     </style>

 </head>

 <body>

     <div id="app">

         <div id='example-3'>

             <label>

                 <input type="checkbox" v-model="checkedNames" value="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>

     <script type="text/javascript">

         new Vue({

             el: '#example-3',

             data: {

                 checkedNames: []

             }

         })

     </script>

 </body>

 </html>

巴特西

vue -model

最新文章

热门文章