Vue实现单选框/下拉框(运用v-model双向绑定)
1.单选框
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
性别：
<input type="radio" name="sex" value="男" v-model="mmm">男
<input type="radio" name="sex" value="女" v-model="mmm">女
<p>
选中了谁: {{mmm}}
p>
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>
// 创建一个Vue实例
var vm = new Vue({
el:"#app",
/*Model：数据*/
data:{
mmm:''
},
});
script>
body>
html>
2.下拉框
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<div id="app">
下拉框：
<select v-model="mmm">
<option disabled value="">--请选择--option>
<option>Aoption>
<option>Boption>
<option>Coption>
select>
<span>{{mmm}}span>
div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js">script>
<script>
// 创建一个Vue实例
var vm = new Vue({
el:"#app",
/*Model：数据*/
data:{
mmm:''
},
});
script>
body>
html>