Vue——基础(对象、属性样式操作、条件、循环、事件、绑定)

---

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容器”
例：

扫描二维码关注公众号，回复： 3585879 查看本文章

<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.下拉菜单定义需定义初始值