本节：总结一下自己最近写的一些功能。
1.点击文字，下划线会自动出现。原理：点击父级元素，子级元素会显示。
子级元素先设置隐藏，父级别元素，再设置显示
.父级元素 :hover .子级元素{
display: block;
}//触摸A联动显示B，最好是父级元素包含子级元素的关系。
.yuansu :hover {
color: #f79806;
font-weight: bold;
transform: translate3d(0, -6px, 0px);
animation-duration: 0.5s;
//可以直接改变元素的颜色，移动位置
}
2.给图片加一层灰色的蒙版
三层布局:
第一层：父级：放背景图片，position：relative 父级定位。
第二层：蒙版 (独立的div，1.设置宽高 2.背景色 3.透明度 4.子级定位 5.页面顺序)，要被父级 div包裹。position：absolute。
第三层：在蒙版div的下面。创建要置顶的内容（1.子级 2.页面顺序）。
3.vue写点击事件，触摸就显示，不触摸就隐藏
div：点击方法 @mouseleave="mouseLeaveOne" @mouseover="mouseOverOne"
方法一：使用show 和hide函数
方法二：把div设置成变量控制。
1.div要定class，并且 v-if 绑定变量。
<div class="actives" v-if="actives"></div>
2.data定义一个变量，赋值布尔类型。
3.直接变量相反，就可以点击出现和点击隐藏自动切换。（@click="navBtn"）
this.nav1 = !this.nav1;
4_1、触摸点击之后，1.文字和图标同时变色 2.且切换的页面之后，也不变色。
(如果想要，不完成1，触摸23没效果，就直接不设置点击事件，不改变样式，然后点击完1，然后才在方法里调用跳到2的页面就可以了)
1. div：点击之后，切换样式，定义了一个类为tabselted，当tabselted 为里面判断的变量值为true的时候，就执行tabselted 的样式；而tabidx是点击之后就改变的值。
2.定义变量
3.方法，tabselted为真的时候，就执行
4.样式发生变化
一张图概括：
4_2.一样在上一张图里，前端正则表达式判断手机号是否正确。
首先，1.点击之后，传参
2.方法接收参数然后正则表达式判断
// 结算单位按钮
nextYuyuePanduan(mianji, name, phone1) {
if (mianji == '' || mianji == undefined || mianji == null) {
alert("请输入面积");
return false;
} else if (name == '' || name == undefined || name == null) {
alert("请输入姓名");
return false;
} else if (phone1 == '' || phone1 == undefined || phone1 == null) {
alert("请输入手机号码");
return false;
}
// 手机号码 正则表达式
const reg = /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/
// 固定电话 正则表达式
const telReg = /^0\d{2,3}-?\d{7,8}$/
// indexOf() 查找某个字符串首次出现的位置，返回下标，找不到返回-1
// 1 开头的号码进入手机号码验证 否则就进入电话号码验证
if (phone1.indexOf('1') == 0) {
if (!reg.test(phone1)) {
alert('请输入11位手机或10-12位固定号码，且为数字')
return;
}
} else {
if (!telReg.test(phone1)) {
alert('请输入11位手机或10-12位固定号码，且为数字')
return;
}
}
// 这是跳到第2页面的
this.nextYuyue(mianji);
},
nextYuyue(mianji) {
this.gujijiawei = false;
this.yuyuefuwu1 = true;
this.yuyuechengong1 = false;
this.tabIdx = 1;
this.price = 100 * mianji;
console.log(mianji);
},
4_3.多选和单选要怎么传值，这里使用的是element的组件
单选：在el-radi0-group绑定一个空字符串，用来放循环点击的中值
//单选代码
<div style="display: flex;margin-top: 14px;">
<el-radio-group v-model="take_house" text-color="#f79806">
<el-radio label="已收楼">已收楼</el-radio>
<el-radio label="一个月内"> 一个月内</el-radio>
<el-radio label="三个月内">三个月内 </el-radio>
<el-radio label="三个月后">三个月后 </el-radio>
</el-radio-group>
</div>多选：在el-checkbox-group这绑定一个空数组，值则在laberl循环出来
<div class="" style="display: flex">
<!-- 这个是 指ta 获取到的数据 model-->
<el-checkbox-group v-model="product">
<el-checkbox class="myRedCheckBox" v-for="(value, key) in productList"
:key="key" :label="value">{{value}}</el-checkbox>
</el-checkbox-group>
</div>多选是设置一个空数组，同时值也是循环出来的数组
接口代码传值的方式。
5.jsonp数据转换成data数据。
lunbotuList = JSON.parse(JSON.stringify(res.data));
6.背景图片不重复，设置背景图片大小
background-size: 1428px 769px;
background-repeat: no-repeat;
7.overflow: hidden; /*自动隐藏文字*/
text-overflow: ellipsis;/*文字隐藏后添加省略号*/
display: flex;
8.写正则表达式的时候，怎么写都判断不了，执行不了正则的判断，看起来逻辑都没有原因，最后，我发现是因为变量名冲突了， 正则表达式判断的那个变量名， 和其他方法的变量名是一致的，所以导致有问题，我把那个变量名改变了，就成功了。（看了很久，逻辑方法都没有问题的时候，可能就变量的问题，包括id也是整个页面只能有一个，不然控制的时候，也可能有问题）