master

分支 (2)

管理

管理

master

character

vuequanjiatongzhivuejichu
/
40-单选复选下拉.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>单选-复选</title>
  </head>
  <body>
    <div id="app">
      <!-- 单选 -->
      <input type="radio" v-model="picked" value="html" id="html" />
      <label for="html">HTML</label>
      <br />

      <input type="radio" v-model="picked" value="js" id="js" />
      <label for="js">JavaScript</label>
      <br />

      <input type="radio" v-model="picked" value="css" id="css" />
      <label for="css">css</label>
      <br />
      <p>选择的项是：{{picked}}</p>

      <hr />
      <!-- 复选 -->

      <input type="checkbox" v-model="checked" value="html" id="html" />
      <label for="html">HTML</label>
      <br />

      <input type="checkbox" v-model="checked" value="javascript" id="html" />
      <label for="javascript">JavaScript</label>
      <br />

      <input type="checkbox" v-model="checked" value="css" id="html" />
      <label for="css">CSS</label>
      <br />
      <p>选择的项是：{{checked}}</p>
      <hr />

      <!-- 下拉 -->
      <select v-model="selected">
        <option :value="option.value" v-for="option in options">
          {{option.text}}
        </option>
      </select>
      <p>选择的项是：{{selected}}</p>
    </div>
  </body>
  <script src="./js/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.2.0/vuex.min.js"></script>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        picked: "js",
        checked: [],
        options: [
          {
            text: "HTML",
            value: "html"
          },
          {
            text: "JavaScript",
            value: "js"
          },
          {
            text: "CSS",
            value: "css"
          }
        ]
      }
    })
  </script>
</html>