首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue表单控件绑定

Vue.js表单控件绑定示例盘点

2023-07-21 10:25:00 作者：小白兔zqd

这篇文章主要为大家介绍了一些Vue.js表单控件绑定示例盘点，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

v-model 指令在表单控件元素上创建双向数据绑定

可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。

1、单行文本

<body>
    <div id="example">
        <input type="text" v-model="message">
        <p>Message is:{{message}}</p>
    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#example',
        data:{
            message:""
        }
    });
</script>

2、多行文本

<body>
    <div id="example">
        <span>Mulitline message is:</span>
        <p style="white-space:pre">{{message}}</p>
        <br>
        <textarea v-model="message" placeholder="add mulitine lines..."></textarea>
    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#example',
        data:{
            message:""
        }
    });
</script>

3、复选框

<body>
    <div id="example">
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{checked}}</label>
    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#example',
        data:{
            checked:false
        }
    });
</script>

4、复选框（升级版）

<body>
    <div id="example">
        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
        <label for="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>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#example',
        data:{
            checkedNames:[]
        }
    });
</script>

5、单选按钮

<body>
    <div id="example">
        <input type="radio" id="one" value="One" v-model="picked">
        <label for="one">One</label>
        <input type="radio" id="two" value="Two" v-model="picked">
        <label for="two">Two</label>
        <br>
        <span>Picked:{{picked}}</span>
    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#example',
        data:{
            picked:""
        }
    });
</script>

6、选择列表

<body>
    <div id="example">
        <select v-model="selected">
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <span>Sclected:{{selected}}</span>
    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#example',
        data:{
            selected:""
        }
    });
</script>

7、绑定value

复选框

<body>
    <div id="example">
        <input 
            type="checkbox"
            v-model="toggle"
            v-bind:true-value="a"
            v-bind:false-value="b">
        <p>{{toggle}}</p>
    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#example',
        data:{
            a:'a',
            b:'b' ,
            toggle:"b"   
        }
    });
</script>

单选按钮

<body>
    <div id="example">
        <input 
            type="radio"
            v-model="picked"
            v-bind:value="a">
        <p>{{picked}}</p>
    </div>
</body>
<script src="vue.js"></script>
<script>
    new Vue({
        el:'#example',
        data:{
            a:'a',
            picked:""   
        }
    });
</script>

以上就是Vue.js表单控件绑定示例盘点的详细内容，更多关于Vue表单控件绑定的资料请关注脚本之家其它相关文章！