条件渲染 （控制元素 显示、消失）
v-if
v-else-if
v-else
控制元素显示消失
v-show 控制元素的显示消失 v-if比较
相同点：都是控制元素的显示、消失 值true 显示 false消失
不同点：值为false时， v-show是改变元素的display属性none v-if直接移除元素
如果初始值为false 则 v-if绑定的元素 压根初始不加载（惰性）
使用场景：
1，v-show适用于 频繁切换状态的场景
2，v-if适用于 初始不加载 切不频繁切换的状态
列表渲染 循环
<ul>
<li v-for="item in arr">
{{ item }}
// 注意 item是循环的每一项 且item的作用域范围是 li内部
</li>
</ul>
得到下标
<ul>
<li v-for="(item, index) in arr">
{{ item }} {{ index }}
// 注意 item是循环的每一项 且item的作用域范围是 li内部
</li>
</ul>
循环json
<li v-for="item in json">
{{ item }}
// 注意 item是循环的每一项 且item的作用域范围是 li内部
</li>
</ul>
// 得到key
<li v-for="(item,key) in json">
{{ item }}
// 注意 item是循环的每一项 且item的作用域范围是 li内部
</li>
</ul>
// 得到下标
<li v-for="(item, key, index) in json">
{{ item }}
// 注意 item是循环的每一项 且item的作用域范围是 li内部
</li>
</ul>
new Vue({
data: {
arr: [1, 2, 3, 4],
json:{
a:1,
b:2,
c:3,
d:4
}
}
})
注意：
循环的每一项需要加一个独一无二的key（今天不讲，明天将mvvm原理时讲）
:class v-bind:class
<div id="app">
<div :class="a"></div>
<!-- div class="box" -->
<div :class="[a,b,'box3']"></div>
<!-- div class="box box2 box3" -->
<div :class="{active:isActive}"></div>
<!-- div class -->
<div :class="{active:1<2}"></div>
<!-- div class="active" -->
<div :class="[a,b,'box3',{active:1==1}]"></div>
<!-- div class="box box2 box3 active" -->
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
a: 'box',
b:'box2',
isActive:false
}
})
</script>
:style vue中的style
<div id="app">
<div :style="a"></div>
<div :style="{ width:100+200+500+'px',height:100+200+'px',background:'red' }"></div>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
a: {
width:'100px',
height: '200px',
background: 'red'
}
}
})
</script>
表单修饰符
修饰v-model
.lazy v-model 会变成change 事件驱动
.trim 自动去除开头结尾空格
.number 将输入的值自动转换成number类型，过程同parseFloat 注意如果这个值无法被 parseFloat() 解析，则会返回原始的值。
