vue-例3-13v-model6.html

最新推荐文章于 2025-12-05 08:37:05 发布

原创最新推荐文章于 2025-12-05 08:37:05 发布 · 101 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

Vue 专栏收录该内容

661 篇文章

订阅专栏

该代码示例展示了如何在Vue.js中使用v-model指令将select元素与data对象的属性进行双向绑定，初始值设为v4，用户选择会反映在love变量上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
</head>
<body>
    <div id="app">
        <select name="ball1" id="ball1" v-model="love">
            <option value="v1">篮球</option>
            <option value="v2">足球</option>
            <option value="v3">排球</option>
            <option value="v4">铅球</option>
        </select>
        <span>爱好：{{love}}</span>
    </div>

    <script src="../js/vue.js"></script>

    <script>
        let vm = new Vue({
           el:'#app',
           data:{
               love:'v4'
           }
        });
    </script>
</body>
</html>