v-model 結合radio的使用

使用value值 和 v-model="sex" 來實現互斥

sex的默認值 可以實現默認選中和不選中兩種效果 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el : '#app',
    data : {
      msg : '你好',
      // sex : '',
      sex : "男"
    },
    methods:{

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

結合checkbox 和 select都是使用 value 和 v-model 

 

發佈了55 篇原創文章 · 獲贊 4 · 訪問量 1萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章