master

分支 (2)

管理

管理

master

character

vuequanjiatongzhivuejichu
/
39-表单与v-model.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>购物车-案例</title>
    <style>
      [v-cloak] {
        display: none;
      }
      table {
        border: 1px solid #e9e9e9;
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;
      }
      th,
      td {
        padding: 8px 16px;
        border: 1px solid #e9e9e9;
        text-align: left;
      }
      th {
        background: #f7f7f7;
        color: #5c6b77;
        font-weight: 600;
        white-space: nowrap;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div>
        <input type="text" v-model="message" placeholder="输入...." />
        <textarea v-model="texts" placeholder="输入..."></textarea>
        <p>输入的内容是：{{ message }}</p>
        <p style="white-space: pre">文本域输入的是：{{ texts }}</p>

        <!-- 可以用@input替代 v-model -->
        <input type="text" @input="handleInput" placeholder="输入..." />
        <p>输入的内容是：{{messagex}}</p>

        <!-- 单选按钮 -->
        <input type="radio" :checked="picked" />
        <label>单选按钮</label>
      </div>
    </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: {
        message: "",
        texts: "",
        messagex: "",
        picked: true
      },
      methods: {
        handleInput: function (e) {
          console.log(e.target.value)
          this.messagex = e.target.value
        }
      }
    })
  </script>
</html>