条件渲染
v-if : 若不频繁切换,会删除DOM节点,再重复添加; template只能配合v-if
v-show: 适用于频繁切换,动态变换但不删除DOM节点
列表渲染
方式: v-for="p in person" :key="yyy"
遍历数组
<body>
<div class="demo">
<ul>
(1) <li v-for="item in items"> {{item}} </li>
(2) <li v-for="(item, index) in items"> {{index}} --- {{item}} </li>
</ul>
</div>
<script>
var app = new Vue({
el: '.demo',
data: {
items: ['小李', '小黄', '小张']
}
})
</script>
</body>
遍历信息
遍历字符串
遍历指定次数
key作用与(原理 - ->待补充)
给列表项添加唯一的标识(比如id),便于vue进行正确排序
key值只能是字符串或数字型,且必须具有唯一性
推荐用id,不用index
列表过滤
return hero.name.indexOf(val) >= 0
indexOf返回在字符串中的下标
指令
v-html="表达式" 动态解析标签
v-show="表达式" 控制元素显示,隐藏 (本质上是切换css的display:none)
v-if="表达式" 条件渲染,创建移除元素 (本质上通过条件判断)
v-on两种方式:
(1)v-on: 事件名 = "内联语句" 作用:注册事件(简写将 v-on: 替换成 @)
(2)v-on: 事件名 = "methods中的函数名"
@click="fn(传参)"