19.VUE【radio、checkbox、select】

最新推荐文章于 2023-07-21 16:06:07 发布

@司马懿

最新推荐文章于 2023-07-21 16:06:07 发布

阅读量130

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_40406929/article/details/118816575

版权

VUE 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

v-model radio

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id ="vue">

  <!--相同name才会导致互斥事件，只能选其1-->
  <!--但是相同v-model-->
  <label for="male">
    <input id="male" type="radio" name="sex" value="男" v-model="sex">男
  </label>
  <label for="female">
    <input id="female" type="radio" name="sex" value="女" v-model="sex">女
  </label>
  <h2>您选择的性别是： {{sex}}</h2>
</div>

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

    const app = new Vue({
        el:'#vue',
        data:{
            sex:''
        }
    });
</script>

</body>
</html>

checkbox

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="vue">

  <!--checkbox单选框-->
  <label for="agree">
    <input type="checkbox" id="agree" v-model="agree" name="agree">同意协议
  </label>
  <h2>您选择的是{{agree}}</h2>
  <button :disabled="!agree">下一步</button>

  <!--checkbox多选框-->
  <br>
  <input type="checkbox" value="篮球" v-model="hobbies">篮球
  <input type="checkbox" value="足球" v-model="hobbies">足球
  <input type="checkbox" value="平球" v-model="hobbies">平球
  <input type="checkbox" value="凹球" v-model="hobbies">凹球
  <h2>您选择的爱好是：{{hobbies}}</h2>

  <!--数据动态绑定-->
  <label v-for="item in ss" :for="item">
    <input type="checkbox" :value="item" v-model="hobbies">
  </label>
  <h2>您选择的爱好是：{{hobbies}}</h2>

</div>

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

<script>

  const app = new Vue({
    el: '#vue',
    data: {
      agree: false,
      hobbies:[],
      ss:['篮球','足球','pingpang','ssssss']
    }
  });

</script>

</body>
</html>

select

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="vue">
  <!--单选-->
  <select name="abc"  v-model="fruit">
    <option value="苹果">苹果</option>
    <option value="桃子">桃子</option>
    <option value="香蕉">香蕉</option>
    <option value="榴莲">榴莲</option>
    <option value="葡萄">葡萄</option>
  </select>
  <h2>您选择的水果是：{{fruit}}</h2>

  <!--多选-->
  <br>
  <select name="fruits" v-model="fruits" multiple>
    <option value="苹果">苹果</option>
    <option value="桃子">桃子</option>
    <option value="香蕉">香蕉</option>
    <option value="榴莲">榴莲</option>
    <option value="葡萄">葡萄</option>
  </select>
  <h2>您选择的水果是：{{fruits}}</h2>
</div>

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

<script>

  const app = new Vue({
    el: '#vue',
    data: {
      message: '你好！华为',
      fruit: '',
      fruits: []
    }
  });
</script>

</body>
</html>

@司马懿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
19.VUE【radio、checkbox、select】

v-model radio<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id ="vue">  .
复制链接

扫一扫

专栏目录