vue指令
2018-01-18 本文已影响1人
xlayzheng
带有 v- 前缀的特殊属性
v-show 控制切换一个元素的显示和隐藏
- 语法：
v-show = " 表达式 " - 根据表达式的结果真假，确定是否显示当前元素
- 隐藏的本质是
display : none
v-if 控制元素显示或者移除
- 语法：
v-if = " 表达式 " - true : 显示 -------- false : 移除
- 移除的本质是 不渲染元素的代码
v-if与v-show使用场景：
- v-if切换消耗比较高（多次创建、销毁）
- v-show初始消耗比较高 （切换频繁时使用）
v-else
- 与 v-if. v-else-if 配合使用
v-else-if
<input type="text" v-model="score"/>
<p v-if="score>=90">优秀</p>
<p v-else-if="score>=75">良好</p>
<p v-else-if="score>=60">及格</p>
<p v-else>不及格</p>
v-on 为HTML元素绑定事件监听
- 语法：
v-on：事件名称 = " 函数名称( ) " - 简写：
@事件名= " 函数名称( ) " - 函数定义在 Vue 实例的methods配置项中
v-model 必须绑定在表单元素上，将输入同步到视图上
- 语法：
v-model= " 变量 " - 使用在
type:checkbox上时 ： v-model与布尔值绑定， true 为选择， fslae 为取消选择 。
v-for 遍历数据，并在页面进行数据展示
- 语法：
- v-for = " (item，index) in arr "
- v-for="(val，key) in object"
- v-for="(val，key，index) in object"
- item 表示每次遍历得到的元素
- index 表示item的索引值，可选参数
- 字符串和数字也可以遍历，会被拆分
v-bind 绑定HTML元素的属性
-
语法：
v-bind : 属性名 = " 表达式 " -
绑定属性
- 一个属性：
<img v-bind:src= " myUrl " /> - 多个属性：
<img v-bind= "{ src : myUrl , title : msg } " />
- 一个属性：
-
绑定样式：
-
:class="index==selected?'active':'' "-----表达式 - 一个样式 ：
:class="{classA:条件}"----- json语法 - 多个样式 ：
:class="[classA , classB]"----- 数组语法
-
-
绑定style：
-
:style="{fontSize:size+'px'}"----- json语法 -
:style="[styleObjectA , styleObjectB]"----- 数组语法
-
-
image.png
- 当 item.bol 为 true 时添加 .Red 这个类名
- 当 item.bol 为 false 时不添加 .Red 这个类名
v-text 更新元素的textContent
- 语法：
v-text = " 变量 " - 相当于innerHTML,会替换掉元素中的所有文本
v-html 插入一些标签内容
- !!!慎用
v-cloak 隐藏直到数据加载完成
- 语法：给视图容器标签加上v-cloak属性
- style中加上
display:none
<style>
[v-cloak]{display: none;}
</style>
<body>
<div id="box" v-cloak> <div>
</body>
