vue对象
1.创建:
new Vue({
…
})
2.属性:
属性 | 描述 |
---|---|
el | 需要管理的区域 |
data | 用来显示在页面的数据 |
computed | 计算属性 |
watch | 监听属性 |
methods | 方法属性 |
vue操作属性
1.格式:
v-bind:属性=”data”
简写::属性=”data”
2.绑定class属性:
v-bind:class=”[‘myColor’,’myFont’]”
v-bind:class=”{‘myColor’:isColor,’ myFon’t : isFont}”(isColor/isFont值为布尔型)
vue操作样式
格式:
v-bind:style=”{‘color’:’red’,’fontSize’:fontSize}”
v-bind:syle=”mystyle”
data:{
mystyle:{
color:’red’,
fontSize:’13px’,
}
}
三元运算
boolean变量 ? 值’1’: ’值2’ 为真则为值1,否则为值2
条件渲染
v-if:”boolean变量”
v-else-if:”boolean变量”
v-else:
v-show=”boolean变量” (通过display控制是否显示)
循环语句
v-for:”变量in容器”
例:
<ul id="example-1">
<li v-for="item in items">
{{ item}}
</li>
</ul>
click事件
v-on:click=”方法名/简单运算代码”
v-on可简写为@
阻止事件冒泡:@click.stop
双向绑定数据
用v-model表示标签的value,在data中定义变量。
例:
<label>用户名:</label><input type="text" v-model="userName">
<span> {{userName}} </span>
注意:
1.复选框初始值定义为空数组
2.下拉菜单定义需定义初始值