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>
vue---:click、:class可以这样表示的更多相关文章
- vue click事件 v-on:click
v-on:click <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- vue - @click 用到的修饰符
1.vue提供的方法 .stop .prevent .capture .self .once .passive <!-- 阻止单击事件继续传播 --><a v-on:click.st ...
- vue click事件获取当前元素属性
Vue可以传递$event对象 <body id="app"> <ul> <li @click="say('hello!', $event) ...
- vue click.stop阻止点击事件继续传播
<div id="app"> <div @click="dodo"> <button @:click="doThis&q ...
- vue click.stop
<div id="app"> <div v-on:click="dodo"> <button v-on:click="d ...
- vue @click.native
1,给vue组件绑定事件时候,必须加上native ,不然不会生效(监听根元素的原生事件,使用 .native 修饰符) 2,等同于在自组件中: 子组件内部处理click事件然后向外发送click事件 ...
- vue @click 使用三目运算(实现动态更换绑定的函数)
转载:https://www.jianshu.com/p/ea4471c9f333 @click 错误写法 @click="dialogStatus=='create'?createData ...
- vue @click传字符串
参考: https://www.cnblogs.com/springlight/p/5782637.html 关键:使用转译字符 \ 来转译引号 方法一. 直接传递: var tem = " ...
- vue - @click 传参删除
<template> <div id="app"> <div v-for="todo in todos" :key ...
- 实现点击页面其他地方,隐藏div(原生和VUE)
1原生方法 // html <div id="box" style="width:110px;height:110px;background-color:red&q ...
随机推荐
- 使用Typora
Markdown学习 标题:#+空格+名称 二级标题 二级标题:##+空格+名称 三级标题 几级标题以此类推,最多支持到六级标题 字体 Hello,world! 变粗体:一句话的前后加上两个** 变斜 ...
- 【Shell案例】【取指定列的方式$5 p[6],双括号运算、awk、管道运算】8、统计所有进程占用内存大小的和
假设 nowcoder.txt 内容如下:root 2 0.0 0.0 0 0 ? S 9月25 0:00 [kthreadd]root 4 0.0 0.0 0 0 ? I< 9月25 0:00 ...
- L1-064 估值一亿的AI核心代码 (20分)
L1-064 估值一亿的AI核心代码 (20分) 以上图片来自新浪微博. 本题要求你实现一个稍微更值钱一点的 AI 英文问答程序,规则是: 无论用户说什么,首先把对方说的话在一行中原样打印出来: 消除 ...
- 【HarmonyOS】ArkTS Native开发——使用 system函数创建文件
ArkTS是HamronyOS优选的主力语言,但官方文档指南中对于Native应用开发并没有详细的描述,只有一篇Codelab可以学习(简易Native C++ 示例(ArkTS) (huawei ...
- SQLMap入门——获取数据库的所有用户
列出数据库中的所有用户 在当前用户有权读取包含所有用户的表的权限时,使用该命令列出所有管理用户 python sqlmap.py -u http://localhost/sqli-labs-maste ...
- 第七节 VOR/DME进近程序保护区的绘制
飞行程序设计软件实践 通过前面六节的练习,2023社区版插件的主要功能都已经使用到了.今天通过VOR/DME非精密进近程序,再将这些功能串起来使用一下.今天的软件,我们使用浩辰CAD2023版(过期后 ...
- day14-功能实现13
家居网购项目实现013 以下皆为部分代码,详见 https://github.com/liyuelian/furniture_mall.git 32.功能30-会员不能登录后台管理 32.1需求分析/ ...
- [python] tensorflow中的argmax()函数argmax()函数
首先 import tensorflow as tf tf.argmax(tenso,n)函数会返回tensor中参数指定的维度中的最大值的索引或者向量.当tensor为矩阵返回向量,tensor为向 ...
- [MySQL] 索引的使用、SQL语句优化策略
目录 索引 什么是索引 索引的创建与删除 创建索引 删除索引 索引的使用 使用explain分析SQL语句 最佳左前缀 索引覆盖 避免对索引列进行额外运算 SQL语句优化 小表驱动大表 索引 什么是索 ...
- Java开发网络安全常见问题
Java开发网络安全常见问题 等闲识得东风面,万紫千红总是春 1.敏感信息明文传输 用户敏感信息如手机号.银行卡号.验证码等涉及个人隐私的敏感信息不通过任何加密直接明文传输. 如下图中小红书APP 的 ...