【Vue】指令之显示切换,属性绑定

Vue指令【2】

显示切换与属性绑定

v-show指令

作用:根据真假切换元素的显示状态

  • 指令后的内容最终都会解析为布尔值
  • 数据改变之后,对应元素的显示状态会同步更新

语法:

html 复制代码
<div id="app">
	<img v-show="true" src="地址" >
	<img v-show="isShow" src="地址" >
	<img v-show="age>=18" src="地址" >
</div>
 <script>
      var app = new Vue({
        el:"#app",
        data:{
          isShow:false,
          age:17
        }
      })
 </script>   

v-if指令

作用:根据表达式的真假切换元素的显示状态

与v-show指令不同的是,v-if操纵的是DOM元素 ,v-show操纵的是display 样式。

因此,频繁的切换使用v-show,反之使用v-if,前者的切换消耗小

语法:

html 复制代码
<div id="app">
	<p v-if="true">我是一个p标签</p>
	<p v-if="isShow">我是一个p标签</p>
	<p v-if="表达式">我是一个p标签</p>
</div>
 <script>
      var app = new Vue({
        el:"#app",
        data:{
          isShow:false,
        }
      })
 </script>   

v-bind指令

作用:设置元素的属性(比如src,title,class

  • 简写可以省略v-bind,只保留:属性名
  • 如果需要动态增删class建议使用对象的方式,更加简便

语法:

html 复制代码
<div id="app">
	<img :src="imgSrc">
	<img :class="{active:isActive}"> // active的值是否生效取决于isActive
</div>
 <script>
      var app = new Vue({
        el:"#app",
        data:{
          imgSrc:"图片地址",
          isActive:false
        }
      })
 </script>   
相关推荐
井柏然6 小时前
前端工程化—实战npm包深入理解 external 及实例唯一性
前端·javascript·前端工程化
昔冰_G7 小时前
Vue内置组件KeepAlive——缓存组件实例
vue.js·缓存·vue3·vue2·keep-alive·vue组件缓存·vue内置组件
IT_陈寒7 小时前
Redis 高性能缓存设计:7个核心优化策略让你的QPS提升300%
前端·人工智能·后端
aklry7 小时前
elpis之动态组件机制
javascript·vue.js·架构
井柏然7 小时前
从 npm 包实战深入理解 external 及实例唯一性
前端·javascript·前端工程化
羊锦磊8 小时前
[ vue 前端框架 ] 基本用法和vue.cli脚手架搭建
前端·vue.js·前端框架
brzhang8 小时前
高通把Arduino买了,你的“小破板”要变“AI核弹”了?
前端·后端·架构
她说..8 小时前
通过git拉取前端项目
java·前端·git·vscode·拉取代码
智能化咨询8 小时前
玩转ClaudeCode:通过Chrome DevTools MCP实现高级调试与反反爬策略
前端·chrome·chrome devtools
xjf77118 小时前
Nx项目中使用Vitest对原生JS组件进行单元测试
javascript·单元测试·前端框架·nx·vitest·前端测试