最近开始写小程序
然后又开始写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动态绑定
- 用全局变量控制
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也可以动态控制
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是两年前
现在weex都开源道Apache作为顶级项目了
再过一遍文档发现布局方面写的还可以
放个链接
http://weex.apache.org/cn/wiki/common-styles.html
Untitled.jpg
