Vue学习总结（表单控件绑定）

checkbox

<p id='check'>
    <input type="checkbox" v-model='checked'>
    <label for="checkbox"> {{ checked }} </label>    //label的值会根据复选框的选中状态来改变
</p>
<script>
     var exampleVME211 = new Vue({
        el:'#check',
        data:{
            checked:false
        }
     })
</script>

多选 checkbox，绑定到同一个数组：

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>勾选的名字是：{{ checkedNames }}</span>
</div>

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []     //选中哪一个。那一个就会被放到数组checkedNames中
  }
})

这里写图片描述
radio

var exa = new Vue({
          el: '#example-3',
          data: {
                picked: ''
          }
    })

select
这里写图片描述
filter 过滤器
先看一段代码

<div id="appBox">
  {{message | filters2| filters3(true,priceCount)}}    //152.8
</div>
<script>
    var appV = new Vue({
          el: "#appBox",
          data: {
            message: 199,
            priceCount:.8
          },
          filters:{
            filters2:function (arg) {
                  console.log("arg:"+arg)
                  if(arg>100){
                        return arg-8;
                  }else {
                        return arg;
                  }
            },
            filters3:function (arg_1,arg_2,arg_3) {
                  var result;
                  console.log("arg_1:"+arg_1)
                  console.log("arg_2:"+arg_2)
                  console.log("arg_3:"+arg_3)
                  if(arg_2){
                        result = arg_1*arg_3;
                        console.log("result"+result);
                        return result;
                    }else{
                        result =arg_1;
                        console.log("result"+result);
                        return result
                    }

                }
          }
    });
</script>

理解：
第一个过滤器 filiters2 传递的参数arg是 message = 199,其方法里面是当 arg大于100减8；
第二个过滤器 filters3 传递了3个参数，第一个参数是 filters2 返回的结果191，第二个参数是 filiters3 传递的一个参数 true,第三个参数是初始化定义的data里面的 priceCount =0.8；

总结
通过过滤器filters我们可以根据业务场景对数据进行处理。
如上一个例子，可以理解成如下业务场景。
1、当商品价格大于100时，可以减8块钱
2、当店铺做活动的时候可以进行打折促销（0.8）
3、最后展示的数值就是用户需要支付的金额

Vue学习总结（表单控件绑定）

猜你喜欢