vue---:click、:class可以这样表示

1、:class

(1)是否选用class

:class="{'active':item.id == id}"

(2)根据条件，当前数据dealerId中是否包含当前id，有用class，没有不用

:class="{'deaid checked':dealerId.indexOf(item.id)>-1}"

 

<li class="left1" :class="[oldData.indexOf(1)!=-1?'active':'']"></li>

 

 

（3）vue动态绑定多个class且是多个条件判断的问题

<div class="app"  :class="[show===true ? 'border' : '' , background_red=== true ? 'red' : '']" > </div>

 

 

--------------------------------------------------------------------------------------------------------

2、@click

（1）点击选中class，可以一边点击一边赋值，youhui初始为0，点击时赋值为1同时函数调用排序
如下：

var vm = new Vue({
    el:'#main',
    data:{
        youhui:0,//优惠or默认
    }
})
:class="{'linka':youhui==0}" @click="youhui=0;sortFn(0)"

（2）点击展示弹窗显示show与关闭按钮close，pop.show 表示弹窗的显示与隐藏操作
如下：

var vm = new Vue({
    el:'#main',
    data:{
        pop:{
            show:false,
            tab:1,
        },
    }
})

 

(3)注册协议弹窗

 

 

 

 利用@click =‘agreement=true’来实现点击的显示与隐藏

如下：
var vm = new Vue({
    el:'#main',
    data:{
        agreement:false,
    }
})

点击：

<a class="readw" @click="agreement=true">《一汽-大众商城个人信息保护声明》</a>

 

注册协议弹窗：

<div class="service-agreement" v-show="agreement">
    注册协议弹窗
    <!--关闭按钮-->
    <span class="close" @click="agreement=false"></span>
</div>

 

--------------------------------------------------------------------------------------------------------

3、:href

vue动态加链接参数：

:href="'/shop-m/page/dealer-store/dealer.html?id='+item2.id"  

--------------------------------------------------------------------------------------------------------

 4、函数方法中使用

(1)数组赋值其实也是操作数组：

数据dealerId赋值时为空，使用时赋值另一个变量dealer，虽然操作的是dealer，因为数组是引用类型，其实同时在操作dealerId

 

如下：复选框代码，利用当前id，判断是否存在来操作删除与添加

https://mall.faw-vw.com/shop-m/page/new-energyResource/select-dealer-v2.html?models-id=152&id=22&fg=3&del-id=4

dealerCheckFn(id){
   var self = this;
   //数组self.dealerId进行赋值，引用类型,同dealer一同变
   var dealer = self.dealerId;
   if(dealer.indexOf(id)>-1){
        dealer.splice(dealer.indexOf(id),1);
   }else if(dealer.length<3){
        dealer.push(id);
   }else {
        methods.prompt("最多只能选择3家经销商");
   }
},

--------------------------------------------------------------------------------------------------------

5、input中表单验证  v-model用里边的值用来判断

（1）用户名（不为空）、手机号验证，同意协议

<input type="text" style="text-align:right" placeholder="请输入您的姓名" class="username" v-model="form.name" >
<input type="tel" style="text-align:right" placeholder="请填写手机号码"  class="usernum" v-model="form.phone">

同意协议，input的id必须与label的for一致：

<input id="overck_21" name="check" class="regular-radio2" type="checkbox">
<label for="overck_21" data-role="none">本人同意并接受</label>

实现如下：

var vm = new Vue({
    el:'#main',
    data:{
        //表单提交
        form:{
            name:'',
            phone:'',
        },
    }，
    methods:{
      subFn(){
            var self = this;
            if(!self.form.name){
                methods.prompt("请输入您的姓名");
                return false;
            }
            if(!methods.phoneVerify(self.form.phone)){
                methods.prompt("请检查您的手机号输入是否正确")
                return false;
            }
            if(!$('#overck_21').is(':checked')){
                methods.prompt("请先阅读并同意《个人信息保护声明》");
                return false;
            };
            alert('提交成功！')
        }
    }
})

提交：

<button class="but-mor bgblue" @click="subFn">立即预约</button>