v-model双向绑定普通输入框 /单选框 /多选框 /下拉列表

最新推荐文章于 2024-04-16 20:18:08 发布

smile_hahahaxixi

最新推荐文章于 2024-04-16 20:18:08 发布

阅读量434

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/smile_hahahaxixi/article/details/105294126

版权

<body>
    <div id="root">
    	//普通输入框
        <input type="text" v-model='text'>
        <h1>您输入的内容是:{{text}}</h1>
        <br />
        
		//单选框
        <label>
            <input type="radio" name="like" v-model='like' value="男">男
        </label>
        <label>
            <input type="radio" name="like" v-model='like' value="女">女
        </label>
        <h1>爱好是:{{like}}</h1>
        <br />
        
        //多选框
        <input type="checkbox" v-model='sex' value="男">男
        <input type="checkbox" v-model='sex' value="女">女
        <input type="checkbox" v-model='sex' value="未知">未知
        <br />
        <h1>性别是{{sex}}</h1>
        
        //下拉框
          <select name="city" id="" multiple v-model='select'>
            <option v-for="item in city" :key="item">
                {{ item }}
            </option>
        </select>
        <br />
        <h1>您选择的是{{select}}</h1>
    </div>

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

    <script>
        new Vue({
            el: '#root',
            data: {
                text: '哈哈',   //text框默认输入值
                like: '男'     //单选框默认选项
                sex: ['女'],   //多选框默认选项
                city: ['成都', '重庆', '上海', '北京'], //下拉框选项
                select:[]     //下拉框选择结果
            },
        })
    </script>
</body>

smile_hahahaxixi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-model双向绑定普通输入框 /单选框 /多选框 /下拉列表

<body> <div id="root"> //普通输入框 <input type="text" v-model='text'> <h1>您输入的内容是:{{text}}</h1> <br /> //单选框 <lab...
复制链接

扫一扫