Vue - v-model

A_bad_horse

已于 2022-02-26 09:53:41 修改

阅读量206

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-02-26 09:07:51 首次发布

本文链接：https://blog.csdn.net/A_bad_horse/article/details/123145089

版权

Vue 专栏收录该内容

50 篇文章 1 订阅

订阅专栏

表单绑定 v-model

Vue使用v-model实现表单元素和数据的双向绑定。

v-model 本质是个语法糖，实质包含2个操作

1. v-bind：绑定value属性值
2. v-on 给当前元素绑定input事件

<input type="text" v-model = "message">
=>
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">

v-model 作用于 radio

<body>
<div id="app">
    <label for="male">
        <input type="radio" id="male" value="男" v-model="sex">男
    </label>
    <label for="female">
        <input type="radio" id="female" value="女" v-model="sex">女
    </label>
    <h2>您选择的性别是：{{sex}}</h2>
</div>

<script src="../vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            sex: '男'
        }
    })
</script>
</body>

v-model 作用于 checkbox(单选）

<body>
<div id="app">
    <label for="agree">
        <input type="checkbox" id="agree" v-model="isAgree">同意协议
    </label>
    <br/><br/>
    <button :disabled="!isAgree">下一步</button>
    <h2>您选择的是：{{isAgree}}</h2>
</div>

<script src="../vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            isAgree: false
        }
    })
</script>
</body>

v-model 作用于 checkbox(多选）

<body>
<div id="app">
    <input type="checkbox" value="篮球" v-model="hobbies">篮球
    <input type="checkbox" value="足球" v-model="hobbies">足球
    <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
    <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
    <h2>您选择的是：{{hobbies}}</h2>
</div>

<script src="../vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            hobbies: []
        }
    })
</script>
</body>

:value值绑定，动态加载数据

<body>
<div id="app">
    <label v-for="item in hobbies">
        <input type="checkbox" :value="item">{{item}}
    </label>
</div>

<script src="../vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            hobbies: ['篮球','足球', '乒乓球', '羽毛球']
        }
    })
</script>
</body>

v-model 作用于 select （单选）

<body>
<div id="app">
    <select name="fruit" id="fruit" v-model="fruit">
        <option value="apple">apple</option>
        <option value="pear">pear</option>
        <option value="banana">banana</option>
    </select>
    <h2>您选择的是：{{fruit}}</h2>
</div>

<script src="../vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            fruit: 'pear'
        }
    })
</script>

v-model 作用于 select （多选）

<body>
<div id="app">
    <select name="fruit" id="fruits" v-model="fruits" multiple>
        <option value="apple">apple</option>
        <option value="pear">pear</option>
        <option value="banana">banana</option>
    </select>
    <h2>您选择的是：{{fruits}}</h2>
</div>

<script src="../vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            fruits: []
        }
    })
</script>
</body>

A_bad_horse

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue - v-model

表单绑定 v-modelVue使用v-model实现表单元素和数据的双向绑定。v-model 本质是个语法糖，实质包含2个操作1. v-bind：绑定value属性值 2. v-on 给当前元素绑定input事件<input type="text" v-model = "message">=><input type="text" v-bind:value="message" v-on:input="message = $event.target.value"&g
复制链接

扫一扫

专栏目录