- p文本換行
- display: block; word-wrap: break-word;
- 樣式中加變量：
- :style是對象，裏面屬性是鍵值對
:style="{‘background-image’:‘url(’+item.img+’)’,background:‘red’}"
-
第一個元素與父容器之間的間距用padding而不用margin，margin會撐開
-
當你設置一個元素爲 box-sizing: border-box; 時，此元素的內邊距和邊框不再會增加它的寬度
-
樣式裏數值計算
- height: calc(100% - 60px);
- 設置div背景顏色透明度，內部元素不透明：
- .demo{ background-color:rgba(255,255,255,0.15) }
-
商品列表佈局換行
display: flex; flex-wrap: wrap; -
class三元表達式
-
:class="item.state1 ? ‘note’:‘note-no’"
非三元：:class=’{bg:indexBoxSelectedIndex}’ -
條件判斷，:class="[right_con_left,{‘fold’:!showItemTree}]
2018.11.26
18. 佔位符
- == 普通的英文半角空格 == == == no-break space （普通的英文半角空格但不換行） == 中文全角空格 （一箇中文寬度） == == en空格 （半個中文寬度） == == em空格 （一箇中文寬度） == 四分之一em空格 （四分之一中文寬度） 相比平時的空格（ ），nbsp擁有不間斷（non-breaking）特性。即連續的nbsp會在同一行內顯示。即使有100個連續的nbsp，瀏覽器也不會把它們拆成兩行。
- 水平垂直居中
display: flex; align-items: center;//垂直居中
justify-content: center;//水平居中
or
display: flex; flex-direction: column; text-align: center;//水平居中
justify-content: center//垂直居中; - 不換行
- li、a、span行內強制不換行；white-space:nowrap;
-
ctrl+alt+左右鍵 代碼位置定位
-
判斷對象爲空
Object.keys(對象).length==0 -
代碼保持同步:
- _this.$nextTick(()=>{
_this.addShortcutsKey(‘enter’, () => {
_this.closeMyMessageBox()
})
- 解構賦值爲淺拷貝
- let obj = { }; let { …x } = obj;
深拷貝：JSON.parse(JSON.stringify(origin));
- v-model
- v-model.trim 將用戶輸入的前後的空格去掉
- v-model.number 將用戶輸入的字符串轉換成number
- radio雙向綁定用
- :checked而不用v-model
- mixin得聲明在調用之前
- 一個列表刪除另一個列表中的同一項，先找到index，再用splice(index,1)
- var index = this.list.findIndex(function(item){ //根據item中的id屬性來判斷這個item是否是上面id中 //對應的數據，如果是返回一個true ,否返回false,繼續下面的一條數據的遍歷，以此類推 return item.id ==id; //如果返回true，那麼findIndex方法會將這個item對應的id返回到外面接受 });
- 彈框代碼模板
- showCombinedMedicationFun(){
//todo
let _this=this
_this.showCombinedMedication=true
_this.$nextTick(()=>{
_this.addShortcutsKey(‘enter’, () => {
_this.confirmCombinedMedication()
})
})
}, - confirmCombinedMedication(){
let _this=this
_this.closeCombinedMedication()
}, - closeCombinedMedication(){
let _this=this
_this.showCombinedMedication=false
},
- 數組複製：
let aa=[1,2,3]
Let bb=[…] 會覆蓋bb
