最近開始寫小程序
然后又開始寫vue
真的是一個頭兩個大
然后慢慢記錄平時的一些前端技巧
不定時更新
讓子元素在父控件里面居中
在父控件里面設置這兩個熟悉
text-align: center;
margin: 0 auto;
當然 display:flex也是不能少的
設置圖片的正確姿勢
<p><span class="icon-add-passenger"></span></p>
.icon-add-passenger {
display: inline-block;
width: 22px;
height: 22px;
background-image: url(../common/images/ic_add_passenger.png);
background-size: 100%;
margin-right: 5px;
}
css動態(tài)綁定
- 用全局變量控制
HTML代碼：
<div :class="classA">Demo2</div>
Javascript代碼：
data: {
classA: 'class-a' //當classA改變時將更新class
}
渲染后的HTML:
<div class="class-a">Demo2</div>
- 通過對象控制
<div :class="{ 'class-a': isA, 'class-b': isB}">Demo4</div>
Javascript代碼：
data: {
isA: false, //當isA改變時，將更新class
isB: true //當isB改變時，將更新class
}
渲染后的HTML:
<div class="class-b">Demo4</div>
- 三木運算控制
HTML代碼：
<div :class="classA ? 'class-a' : 'class-b' ">Demo3</div>
Javascript代碼：
data: {
classA: true
}
渲染后的HTML:
<div class="class-a">Demo3</div>
- json控制
HTML代碼：
<div :class="classA ">Demo3</div>
Javascript代碼：
data: {
classA: {
colorA:true,
colorB:false
}
}
<style>
.colorA{
color:red
}
.colorB{
back-groundcolor:blue
}
</style>
渲染后的HTML:
<div class="colorA">Demo3</div>
這種使用的比較多
多種樣式控制比較方便
其實style也可以動態(tài)控制
HTML代碼：
<div :style="[classA,classB] ">Demo3</div>
Javascript代碼：
data: {
classA:{
color:red
},
classB:{
backgroundColr:blue
}
}
<style>
</style>
渲染后的HTML:
<div style="classA,classB">Demo3</div>
這樣div就有classA和classB的復合屬性
注意點：復合樣式 一定要采用駝峰命名方式 不能按照原css寫法
style和class用法類似
這種使用的比較多
多種樣式控制比較方便
最近要開始用weex做項目了
距離上一次用weex是兩年前
現(xiàn)在weex都開源道Apache作為頂級項目了
再過一遍文檔發(fā)現(xiàn)布局方面寫的還可以
放個鏈接
http://weex.apache.org/cn/wiki/common-styles.html
Untitled.jpg
