vue练习demo5-(v-model)

最新推荐文章于 2022-05-08 11:51:24 发布

原创最新推荐文章于 2022-05-08 11:51:24 发布 · 392 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

vue 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了如何在HTML中使用Vue.js实现性别选择和下拉菜单的交互，展示了v-model指令在绑定数据及动态显示选中的值。适合初学者理解Vue的基本用法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        性别：
        <input type="radio" value="男" v-model="result">男
        <input type="radio" value="女" v-model="result">女
        <br>
        你选择的是：{{result}}

        <p></p>
        <select v-model="result2">
            <option value="" disabled>==请选择==</option>
            <option>A</option>
            <option>B</option>
            <option>C</option>
        </select>
        <br>
        你选择的是：{{result2}}
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data:{
                result: '',
                result2: ''
            }

        })
    </script>
</body>
</html>