目录
v-if的demo案例
v-show案例
v-for循环遍历案例
第一部分： v-if的demo案例
<div id="root">
<span v-if="ispage">
<label for="username">邮箱昵称</label>
<!-- id具有唯一值 在表单中给定一个id绑定label具有聚焦功能，点击label也可以操作-->
<!-- key值必须要加，否则不能呈现出整体内容切换效果 -->
<input type="text" placeholder="点击我输入邮箱昵称" id="username" key="aaa"/>
</span>
<span v-else="ispage">
<label for="email">邮箱账号</label>
<input type="text" placeholder="点我输入邮箱账号" id="email" key="bbb"/>
</span>
<button type="button" @click="ispage =!ispage">切换</button>
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data(){
return{
ispage:true
}
}
})
</script>
第二部分：v-show案例
<div id="root">
<button @click="btn" v-show="done">阻止佩洛西老太太去台湾</button>
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
done:true
},
// 设置一个点击之后就隐藏的效果
methods:{
btn(){
this.done=false
}
}
})
</script>
第三部分：v-for循环遍历案例
<div id="root">
<!-- 利用v-for循环遍历内容 -->
<p v-for="(item,index) in list" :key="item.id">{ {item.name}}--{ {item.age}}
<input type="text" />
</p>
<!-- 添加两个点击按钮 -->
<button type="button" @click="add">添加</button>
<button type="button" @click="del">删除</button>
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
// 添加静态数据
list:[{
id:01,
name:'张三',
age:20
},
{
id:02,
name:'李四',
age:30
},
{
id:03,
name:'王五',
age:40
}
]
},
methods:{
add(){
this.list.unshift({
id:04,
name:'赵六',
age:50
})
},
del(){
this.list.pop()
}
}
})
</script>