vue之day03：案件修饰符， check-box单选多选和radio,基本购物车功能，v-model进阶，Vue生命周期，Vue与后端交互

本文链接：https://blog.csdn.net/Yydsaoligei/article/details/127541656

目录标题

一：事件处理之案件修饰符

<body>
    <div class="app">
        普通使用：<input type="text" v-model="myText" @keydown="handleDown($event)">
        监控enter键：<input type="text" v-model="myText" @keydown.enter="handleDown1">
    </div>

</body>
<script>
    var vm = new Vue({
     
     
        el: '.app',
        data: {
     
     
            myText: '',
        },
        methods: {
     
     
            handleDown(event){
     
     
                console.log(event.key)
            },
            handleDown1(){
     
     
                console.log('enter被按下了')
            }
        }
    })
</script>

二：表单控制之check-box单选多选和radio

<h1>check-box单选》》》使用布尔值</h1>
      <input type="checkbox" v-model="check_rem">
      <hr>
      <h1>check-box多选》》使用数组</h1>
      <input type="checkbox" v-model="check_many" value="1">抽烟
      <input type="checkbox" v-model="check_many" value="2">喝酒
      <input type="checkbox" v-model="check_many" value="3">烫头
      <input type="checkbox" v-model="check_many" value="4">洗澡
      <hr>
      {
   
   {
   
   check_many}}

      <hr>
      <h1>radio之单选</h1>
      <input type="radio" v-model="gender" value="1">男
      <input type="radio" v-model="gender" value="2">女
      <input type="radio" v-model="gender" value="0">未知
      {
   
   {
   
   gender}}