2020-12-02

-----props默认值写法----

 props: {
    rowClick: {
      type: Function,
      default: function() {}
    },
    title: {
      type: String,
      default: "标题"
    },
    display: {
      type: String,
      default: "table" 
    },
    columnCount: {
      type: Number,
      default: 4
    },
    columns: {
      type: Array,
      default() {
        return [];
      }
    },
    showPage: {
      type: Boolean,
      default: true
    },
    api: {
      type: Object,
      default() {
        return {};
      }
    },
    parameter: {
      type: Object,
      default() {
        return {};
      }
    },
    defaultParameter: {
      type: Boolean,
      default() {
        return true;
      }
    }
  },

 

-------------vue中样式的七种写法------------

https://blog.csdn.net/qq_41170620/article/details/91357869
-----属性的值是标识符,但是如果对象中的 键 含有- 则必须给该键添加""----
样式带杠两种写法
colb:{'background-color':'green'}//colb:{'background-Color':'green'}也不错
colb:{backgroundColor:'green'}//colb:{'backgroundColor':'green'}也不错  colb:{'backgroundcolor':'green'}错

<!-- 内联样式，跟一般css添加样式相似， 多了一个绑定，样式添加通过数组方式，数组中以字符串显示 -->
<div id="box" :class="['one','two']">{{mg}}</div>

<!--数组中添加三元表达式，只有为true时候才起作用  --> 
    <!-- 下边这种在变换样式的时候采用 需要另外在data中说明flag的值 -->
<div id="box1" :class="['one','two',flag? 'three':'']">{{mg}} 这种方法不好读</div>
     <!-- 三元表达式看着麻烦，使用对象形式好一些 -->
<div id="box12" :class="['one','two',{three:flag}]">{{mg}}</div> 
<!-- 然后有了下面这两种形式 -->
 <div id="box2" :class = "[{one:true},{ two:true},{ 'three' :true}]">{{mg}} </div>
<!--
使用对象添加样式的时候，对象的属性是类名，对象的属性名可以带引号也可以不带引号，属性的值是标识符,但是如果对象中的 键 含有- 则必须给该键添加""
--> 

 <div id="box3" :class = "{one:true, two:true, three :true}">{{mg}} </div>   
 <div id="box4" :class = mm>{{mg}}</div>

------------------------------------style--------------
<div id="box5" :style='{color:"red","font-size":"50px"}'>{{mg}}</div>
<!-- 同样的有了下边的写法 -->
<div id="box6" :style='style1'>{{mg}} 一个</div> 
<div id="box7" :style='[style1,style2]'>{{mg}}多个的时候要通过数组的方式</div>