特殊技巧

特殊技巧

1 . calc( )公式

.box{
      width: calc(100% - 50px);
}
//注意 : 等号两边必须加空格,单位无要求

2.属性选择器和通配选择器

✈属性选择器

<div class="col-lg-4"></div>

div[class="col-lg-4"]{
    border: 1px solid #f40;
    height: 40px;
}									//给带类名col-lg-4的div设置css样式

✈通配选择器

<div class="col-lg-4"></div>
<div class="col-lg"></div>

div[class*="col-lg"]{
    border: 1px solid #f40;
    height: 40px;
}								//给类名中只要有col-lg的div设置css样式

3 . if 和 for 的大括号 ( ☝ 大括号里只有一条执行语句,才可以省略 )

if ( 条件判断 ){ 一条执行语句 } ; 大括号可以省略

//☝正常书写规范
var age = 20;
if (age >= 18){
    alert("成年了,可以进网吧");
}else{
	alert("未成年,不能进网吧");
};
//省略大括号写法
var age = 20;
if (age >= 18)
    alert("成年了,可以进网吧");
else
	alert("未成年,不能进网吧");

for ( let i = 0 ; i <= 10; i++) { 一条执行语句 }; 大括号可以省略

//☝正常书写规范
for (let i = 0 ; i < 10 ; i++){
    console.log(i);
};
//省略大括号写法
for (let i = 0 ; i < 10 ; i++) console.log(i);

4.css文件中导入css文件

//使用css本身的语法导入css
 @import url('./css/index.css');      //css的路径

5.vue中自己分页

methods: {
    //点击页码改变页码
    handleCurrentChange(val) {
     //val为页码
     this. pagenum = val;
     //重新获取页面内容
     this.getgoodslist();
    },
     //获取表格数据事件
    getgoodslist() {
     	//获取表格内容的请求
        getgoods().then(res => {
            //将获取到的表格内容赋值给data
          this.data = res.data.data;
          this.pagesumnum = res.data.data.length;
          let start = (this.pagenum - 1) * 10;
          let end = start + (10 - 1);
          this.tableData = this.data.slice(start, end + 1);
        });
     }
  },

data() {
    return {
      //页码
      pagenum: 1,
      //页容量
      pagesize: 10,
      //总的数据条数
      pagesumnum: 0,
      //表格数据
      tableData: [],
      //所有表格数据
      data: [],
    };
},

<el-pagination
      //页码改变事件
      @current-change="handleCurrentChange"
       //页码绑定的数据
      :current-page.sync="pagenum"
       //页容量绑定的数据
      :page-size="pagesize"
      layout="total, prev, pager, next"
       //总的数据条数
      :total="pagesumnum"
 ></el-pagination>