单选框和多选框

radio 和v-model

单选框中使用 v-model 会把这些绑定sex的分为一组 一次只能选中一个

<label>男  <input type="radio" v-model="sex" value="男"></label>
  <label>女 <input type="radio" v-model="sex" value="女"></label>
  <label>其他 <input type="radio" v-model="sex" value="其他"></label>
  <script>
  let vm = new Vue({
    el: '#app',
    data: {
      sex: '男'
    }
  })
</script>

多选框 checkbox

• 若只有一个会转换成布尔值
• 若有多个 会把选中的值放到同一个数组中

<label>睡觉：<input type="checkbox" v-model="hobby" value="睡觉"  /></label>
<label>吃饭：<input type="checkbox" v-model="hobby" value="吃饭" /></label>
<label>约会：<input type="checkbox" v-model="hobby" value="约会" /></label>

<script>
  let vm = new Vue({
    el: '#app',
    data: {
      val: 1,
      hobby: []
    }
  })
</script>

select v-model的值和下面的值相同时会选中该option

<select v-model="hobby">
    <option value="1">篮球</option>
    <option value="2">羽毛球</option>
    <option value="3">乒乓球</option>
  </select>
  
  <script>
  let vm = new Vue({
    el: '#app',
    data: {
      hobby: '3'
    }
  })
</script>

axios 在Vue中使用ajax请求数据 一般放在钩子函数created中

<ul>
    <li v-for="(item, index) in arr" :key="index">
      {{item.name}}
      <ul>
        <li v-for="(sItem, sIndex) in item.list" :key="sIndex">
          {{sItem}}
        </li>
      </ul>
    </li>
  </ul>
  
  <script>
  let vm = new Vue({
    el: '#app',
    data: {
      arr: []
    },
    created () {
      // 当 Vue 的实例创建成功以后会执行这个函数，Vue 中所有的 ajax 请求都在这里发送
      console.log(this); // this 是 vm 的实例
      this.getData(); // this.getData() 就是 methods 中的 getData() 方法
    },
    methods: {
      getData() {
        axios.get('list.json').then(({data}) => {
          this.arr = data; // 我们直接把 arr 赋值成一个新的数组，因为 Vue 是响应式的，会自动更新页面
        }).catch(e => {
          console.log(e)
        })
      }
    }
  })
</script>