Vue.js 前端框架学习笔记（三）

 input 和 textarea 元素中使用 v-model 实现双向数据绑定

  <script src="https://npmcdn.com/vue/dist/vue.js">

var app = new Vue({
    el: '#app',
    data: {
    message: '双向绑定',
    message2: '文本绑定\r\nhttp://www.baidu.com'
    },
})

</script>

<div id="app">
     <input v-model="message" placeholder="这里输入……">
       <p>消息是: {{ message }}</p>
      
       <p>文本框：</p>
       <p style="white-space: pre">{{ message2 }}</p>
       <textarea v-model="message2" placeholder="多行文本输入……"></textarea>

</div>

复选框

<script src="https://npmcdn.com/vue/dist/vue.js">

new Vue({
  el: '#app',
  data: {
     picked : 'Runoob',
    checkedNames: []
  }
})

</script>

<div id="app">
    <p>单选复选框：</p>
  <input type="radio" id="runoob" value="Runoob" v-model="picked">
  <label for="runoob">Runoob</label>
  <br>
  <input type="radio" id="google" value="Google" v-model="picked">
  <label for="google">Google</label>
  <br>
  <span>选中值为: {{ picked }}</span>
  <p>多个复选框：</p>
  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
  <label for="runoob">Runoob</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <br>
  <span>选择的值为: {{ checkedNames }}</span>
</div>

select 列表

<script src="https://npmcdn.com/vue/dist/vue.js">

new Vue({
  el: '#app',
  data: {
    selected: ' ' 
  }
})

</script>

<div id="app">
    <select v-model="selected" name="fruit">
    <option value="">选一个爱好</option>
    <option value="bascktbal">篮球</option>
    <option value="music">音乐</option>
    <option value="pay">游戏</option>
  </select>
  <div id="output">
      选择的爱好是: {{selected}}
  </div>
</div>