Vue表单绑定（单选按钮，选择框（单选时，多选时,用 v-for 渲染的动态选项）

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>Vue表单绑定（单选按钮，选择框（单选时，多选时）</title>
   </head>
   <body>
       
       <div id="app">
           <input type="radio" value="选择1" v-model="radio"/>
           <label>选择1</label>
           <input type="radio" value="选择2" v-model="radio"/>
           <label>选择2</label>
           <p>所选择：{{radio}}</p>
       </div>

       
       <div id="app1">
           <select v-model="select">
               <option disabled value="">请选择</option>
               <option>A</option>
               <option>B</option>
               <option>C</option>
           </select>
           <p>所选择：{{select}}</p>
       </div>

<div id="app2">
           <select v-model="select">
               <option v-for="item in list" v-bind:value="item.id">{{item.name}}</option>
           </select>
           <p>所选择：{{select}}</p>
       </div>
       <script src="vue.js"></script>
       <script>
           //单选按钮
           var app=new Vue({
               el:"#app",
               data:{
                   radio:"选择1"
               }
           });

           //选择框(单选时)
               var app=new Vue({
               el:"#app1",
               data:{
                   select:""
               }
           });

//用 v-for 渲染的动态选项
           var app2 = new Vue({
               el: "#app2",
               data: {
                   select: '1',
                   list: [{
                           id: 1,
                           name: 'A'
                       },
                       {
                           id: 2,
                           name: 'B'
                       },
                       {
                           id: 3,
                           name: 'C'
                       }
                   ],
               }
           })

</script>
</body>
</html>

选择框（多选时）：只需要把select:[] 即可,并且添加multiple；

巴特西

Vue表单绑定（单选按钮，选择框（单选时，多选时,用 v-for 渲染的动态选项）

最新文章

热门文章