v-model单选框、复选框小案例、select框默认值选中

个人练习参考

1.效果图

2.代码

<template>
  <div>
    <form>
      <span>姓名:</span> <input type="text" v-model="name" /> <br />

      <span>性别:</span>
      <input type="radio" value="男" v-model="sex" />男
      <input type="radio" value="女" v-model="sex" />女<br />

      <span>爱好:</span>
      <span :key="index" v-for="(item, index) in hobby">
        <input type="checkbox" :value="item" v-model="yourHobby" />{{ item }}
      </span>
      <br />

      <span>职业:</span>
      <select v-model="youzhiye">
        <option :value="youzhiye" disabled hidden>{{ youzhiye }}</option>
        <option :key="index" v-for="(item, index) in zhiye" :value="item">
          {{ item }}
        </option>
      </select>

      <button @click.prevent="submit">提交</button>
    </form>
  </div>
</template>

<script>
export default {
  name: "",
  created() {},
  mounted() {},
  data() {
    return {
      name: "",
      sex: "男",
      yourHobby: [],
      hobby: ["抽烟", "喝酒", "打篮球", "跳舞", "稍等"],
      youzhiye: "请选择选项",
      zhiye: ["前端工程师", "洗脚人员", "篮球运动员"],
    };
  },
  methods: {
    submit() {
      if (this.youzhiye == "请选择选项") {
        alert("请选择职业");
        return;
      }
      console.log("name", this.name);
      console.log("sex", this.sex);
      console.log("yourHobby", this.yourHobby);
      console.log("youzhiye", this.youzhiye);
    },
  },
};
</script>
<style lang="less" scoped></style>

3.select框默认值选中

实现select默认选中框，如果不给第一个option :value=“youzhiye”,上面又v-model=“youzhiye”,那么这个默认选中框是不显示的。