vue实现单选和下拉

最新推荐文章于 2024-11-04 15:22:25 发布

huang-de-jun

最新推荐文章于 2024-11-04 15:22:25 发布

阅读量296

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/hdj0511/article/details/127415571

版权

本文介绍了Vue.js中的双向数据绑定原理和应用，通过一个实例展示了如何使用v-model在select元素中实现用户选择的实时更新。同时，文章还探讨了单选按钮的实现，利用v-model和radio元素创建了一个简单的性别选择表单，用户选择的性别会实时反映在数据显示上。

摘要由CSDN通过智能技术生成

下拉

<template>
  <div>
    <!-- v-model: 双向绑定 -->
    <!-- 使用范围: 表单元素 - 用户可以操作的元素, 单选 多选 输入框 -->
    <!-- 作用: 变量绑定在元素上, 实时收集数据, 当用户操作时 值发生变化就会实时存储在变量里 -->

    <!-- 双向的表现 -->
    <!-- 1. 数据tool的默认值是4, 页面初始化就显示的老头乐, 即4 -->
    <!-- 2. 用户操作表单元素后, 数据也会变化 -->

    <h3>壮壮, 选择你心仪的座驾: {{ tool }}</h3>
    <!--  -->
    <select v-model="tool">
      <option value="0">雅迪</option>
      <option value="1">小牛</option>
      <option value="2">捷安特</option>
      <option value="3">三蹦子</option>
      <option value="4">老头乐</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tool: 4, //默认选项--4
    }
  },
}
</script>

<style lang="scss" scoped></style>

单选

<template>
  <div>
    <!-- 单选框 -->
    <h2>壮壮的性别是? {{ xb }}</h2>
    <!-- 数组[下标] : 服务器的数据库存选项都是序号, 就是方便搭配搭配数组用 -->
    <p>{{ ['boy', 'girl', '???'][xb] }}</p>
    <label>
      <!-- 数据库中, 通常用数字代表选项 -->
      <input type="radio" name="sex" value="0" v-model="xb" />
      <span>男</span>
    </label>
    <label>
      <input type="radio" name="sex" value="1" v-model="xb" />
      <span>女</span>
    </label>
    <label>
      <input type="radio" name="sex" value="2" v-model="xb" />
      <span>未知</span>
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      xb: 2,
    }
  },
}
</script>

<style lang="scss" scoped></style>