Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 响应式渲染 - 指令
目录
指令
介绍
缩写
指令示例
总结
指令
介绍
指令：是指带有v-前缀的特殊属性
v-bind 动态绑定属性
v-if 动态创建/删除
v-show 动态显示/隐藏
v-on:click 绑定事件
v-for 遍历
v-model 双向绑定表单
缩写
v-bind:src => :src
v-on:click => @click
指令示例
使用v-show与v-if指令分别实现动态显示和隐藏。
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide {
display: none;
}
</style>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="box">
<button @click="clickHandle()">button</button>
<div v-show="isShow">动态显示和隐藏-指令</div>
<div v-if="isCreate">动态创建和删除-指令</div>
</div>
<script>
new Vue({
el: "#box", // element
data: {
isHide: false,
isShow: true,
isCreate: true
},
methods: {
clickHandle() {
console.log('点击了按钮')
this.isShow = !this.isShow
this.isCreate = !this.isCreate
}
}
})
</script>
</body>
</html>效果：
if是条件渲染，show是显示与隐藏。
总结
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 响应式渲染 - 指令
