Vue声明式渲染、条件与循环、事件绑定、双向绑定

1、声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
在app.vue中的template里Vue声明式渲染、条件与循环、事件绑定、双向绑定_第1张图片
在app.vue中的export default中Vue声明式渲染、条件与循环、事件绑定、双向绑定_第2张图片
效果图:在这里插入图片描述

2、条件与循环
在template中用v-if定义seen
在下方的export default中的return中添加
seen=true,(显示)或seen=false,(隐藏)
v-for 指令可以绑定数组的数据来渲染一个项目列表:Vue声明式渲染、条件与循环、事件绑定、双向绑定_第3张图片
在return中添加Vue声明式渲染、条件与循环、事件绑定、双向绑定_第4张图片
效果图:Vue声明式渲染、条件与循环、事件绑定、双向绑定_第5张图片

3、事件绑定
在这里插入图片描述
下方注释为简写方式。
在组件下方添加新的事件:Vue声明式渲染、条件与循环、事件绑定、双向绑定_第6张图片
效果为:出现弹出框内容为 ‘触发了!’Vue声明式渲染、条件与循环、事件绑定、双向绑定_第7张图片

4、双向绑定
在template中在这里插入图片描述
在return下添加:在这里插入图片描述
出现效果为:Vue声明式渲染、条件与循环、事件绑定、双向绑定_第8张图片

你可能感兴趣的:(Vue声明式渲染、条件与循环、事件绑定、双向绑定)