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

2019-11-19 11:35:42

字体：大中小

来源：转载

供稿：网友

<!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>

<!-- 用 v-for 渲染的动态选项 -->    <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 渲染的动态选项）,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

上一篇：jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例

下一篇：JavaScript封闭函数及常用内置对象示例