https://codepen.io/deadzq-the-decoder/pen/qBqQYXg

标签：label   pre   val   cti   submit   pac   new   book   this   

<div id="spirit">
  <div id="example-1">
    <input v-model="message" placeholder="edit me">
    <p>Message is:{{message}}</p>
    <textarea v-model="message2" placeholder="add multiple lines"></textarea>
    <p style="white-space:pre-line;">
      {{message2}}
    </p>
    <br />
    <div style="margin-top:20px;">
      <input type="checkbox" id="someone" value="someOne" v-model="checkedNames">
      <label for="someone">someone label</label>
      <input type="checkbox" id="book" value="BOOK" v-model="checkedNames">     <label for="book">book LABEL</label>
      <input type="checkbox" id="company" value="COMPANY" v-model="checkedNames">
      <label for="company">COMPANY LABEL</label>
      <br>
      <span>Checked names:{{checkedNames}}</span>
    </div>
    
<!--     公司金融学 -->
    <div style="margin-top:20px;">
      <input type="radio" id="one" value="One" v-model="picked">
      <label for="one">One Label</label>
      <br>
      <input type="radio" id="two" value="Two" v-model="picked">
      <label for="two">Two Label</label>
      <br>
      <span>Picked: {{picked}}</span>
    </div>
    <button type="button" @click="submit">提交</button>
  </div>
</div>

js:

var vm = new Vue({
  el:"#spirit",
  data:{
    message:"test",
    message2:"hi",
    checkedNames:[‘someOne‘],
    picked:"Two"
  },
  methods:{
    submit:function(){
      console.log(this.message);
    }
  }
});

https://codepen.io/deadzq-the-decoder/pen/qBqQYXg

标签：label   pre   val   cti   submit   pac   new   book   this   

原文地址：https://www.cnblogs.com/ukzq/p/14512220.html