Vue指令之v-if

v-if指令根据表达式值的真假，切换元素的显示和隐藏，其实是在操作dom元素;
v-if和js里的if差不多，也会有v-else-if和v-else，js里的if判断是用于在js语法里面的判断，v-if在vue中是对于代码块的判断；

如 <p v-if="isShow">不装了，我摊牌了，没错你要找的就是我</p>

当指令的判断isShow为true时，p标签则会生成，进而在页面中显示出来，反之在编译时不会生成p标签。

1.html、js

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>v-if指令</title></head><body><div id="app"><input type="button" value="点我切换显示" @click="changeIsShow" /><p v-if="isShow">不装了，我摊牌了，没错你要找的就是我</p></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var  app = new Vue({el:"#app",data:{isShow:false},methods:{changeIsShow(){this.isShow = !this.isShow}}})</script></body>
</html>

2.运行结果

3.总结

v-if指令的作用：根据表达式的真假切换元素的显示状态
本质是通过操纵dom元素来进行切换显示
表达式的值为true的时候元素存在于dom树中，为false的时候从dom树中移除

Vue指令之v-if相关推荐

Vue——基本的代码结构和插值表达式、v-cloak||Vue指令之v-text和v-html||v-bind的三种用法||Vue指令之v-on
Vue的基本代码 <!DOCTYPE html> <html lang="en"><head><meta charset="UT ...
Vue基础-vue指令
一.vue基础-插值表达式 1.思考 1.以前改变标签内容,如何做? 2.用 Vue 有没有更简单的方式? 2.目的在dom标签中, 直接插入内容 3.语法又叫: 声明式渲染/文本插值语法: { ...
vue停止指令_一个微小的Vue指令，当到达边缘时停止传播滚动
vue停止指令停止滚动 (vue-scroll-stop) A tiny Vue directive that stop propagation scroll when edge reached. ...
vue脚手架_基础API、Vue基本概念、vue-cli 脚手架、vue指令
vue脚手架_基础API 安装:vue-devtools 学习和调试vue必备之利器 - 官方插件安装: 打开Chrome浏览器 =>点击浏览器右上角小图标,按图示操作 2.进入扩展程序菜单 ...
Vue指令实战：结合bootstrap做一个用户信息输入表格
结合前面的vue指令做了个小例子,用户在表单里面输入用户名和年龄,点击"添加"以后会保存到用户信息表里面 <!DOCTYPE html> <html> &l ...
数字气泡 php,vue指令如何实现气泡提示（附代码）
本篇文章给大家带来的内容是关于vue指令如何实现气泡提示(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 菜鸟学习之路 //L6zt github 自己在造组件轮子,也就是 ...
Vue指令练习实例-学生信息录入
很好的一个可以感受Vue.js的MVVM模型,数据和模型双向绑定的实例练习. <!doctype html> <html lang="en"> <he ...
Vue -- 指令【学习笔记】（持续更新）
Vue – 指令[学习笔记](持续更新) 记录了Vue第三天的学习笔记 v-show 注意,v-show 不支持 <template> 元素,也不支持 v-else. 带有 v-show ...
vue全套笔记，前端工程化+vue指令+脚手架
文章目录一. 前端工程化 webpack 的基本使用 webpack 中的插件 webpack 中的 loader 打包发布 Source Map的使用注意,实际开发不需要自己配置webpack ...
4.Vue指令（Directives）
目录 1. Vue环境搭建(Node) 2. npm与yarn详细使用 3. Vue介绍及其基本使用 4. Vue指令(Directives) 5. Vue修饰符(Modifier) 6. Vue计算 ...

Vue指令之v-if

Vue指令之v-if

1.html、js

2.运行结果

3.总结

Vue指令之v-if相关推荐

最新文章

热门文章