vue基础知识-指令（v-show v-if v-bind）

最新推荐文章于 2022-11-16 16:14:44 发布
最新推荐文章于 2022-11-16 16:14:44 发布
阅读量317 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/s4459/article/details/103865734
版权

v-show

根据表达值的真假，切换元素的显示和隐藏（操纵的是display样式）

v-if

根据表达值的真假，切换元素的显示和隐藏（操纵的是dom元素）

v-bind

设置元素的属性

 <style>
    .active{
        border: 2px solid red;
    }
  </style>
<body>
    <div id="app">
        <!--第一个title的悬停用的是详细写法 class用的是简写 省略了v-bind active是否有效取决于isActive的布尔值-->
        <img  v-bind:title="imgTitle+'----'" src="../2.jpg" alt="" :class="{active:isActive}" @click="changeIsActive">
    </div>
    <!-- development version, includes helpful console warnings -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
      var app = new Vue({
          el:"#app",
          data:{
              imgTitle:"悬停",
              isActive:false
          },
          methods:{
              changeIsActive:function(){
                  this.isActive=!this.isActive;
              }
          }
      })
    
    </script>
</body>

可以实现对图片点击增删边框的操作

脆的娃娃菜好吃
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue基础 第五讲笔记：v-show、v-if、v-bind
qq_49956121的博客
10-02 330
一、v-show 根据真假切换元素的显示状态。 注意： 1、原理是修改元素display，实现显示隐藏。 2、指令后面的内容，最终都会解释为布尔值。 3、值为true元素显示，值为false元素隐藏。 实例： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div
关于vue指令v-show,v-bind的使用
dreamy_wx的博客
12-02 451
<style> .texts { color: #666; border: 1px solid #000; padding: 30px; } .flagBox { background: #f00; width: 50px; height: 50px; } .red, .
Vue系列教程（08）- 基本语法（v-bind、v-if、v-for）
阿甘兄
06-24 834
文章目录1. 引言2. 绑定（v-bind）3. 判断3.1 v-if， v-else3.2 v-else-if4. 循环（v-for） 1. 引言 通过前面的章节，我们已经完成了vue的第一个程序，有兴趣的同学可以参阅下： 《Java程序员从零开始学Vue（01）- 前端发展史》 《Java程序员从零开始学Vue（02）- Vue环境搭建、项目创建及运行》 《Java程序员从零开始学Vue（03）- Vue开发利器VsCode》 《Java程序员从零开始学Vue（04）- VsCode断点调试》 《J
v-bind指令，v-if指令
weixin_45206561的博客
11-16 300
代码： 结果：
Vue【三】vue指令语法 一，vue基础语法中的v-bind、v-on、v-if、v-show、v-else、v-else-if这六个指令语法的介绍以及基本使用。
小祥编程擅长前端
11-16 425
vue指令, 实质上就是特殊的 html 标签属性, 特点: v- 开头。每个 v- 开头的指令, 都有着自己独立的功能, 将来vue解析时, 会根据不同的指令提供不同的功能本文主要讲了vue基础语法中的v-bind、v-on、v-if、v-show、v-else、v-else-if这六个指令语法的介绍以及基本使用。
web前端VUE框架-基础知识及核心原理
01-27
Vue 还提供了多种指令，如 `v-model` 用于双向数据绑定，`v-if` 和 `v-show` 控制条件渲染，`v-for` 进行循环，以及 `v-once` 只渲染元素和组件一次。 Vue 还支持自定义指令，通过 `Vue.directive()` 注册。这些...
vueDemo-master1.zip
04-21
Vue.js 是一款轻量级但功能强大的前端...通过深入研究"vueDemo-master1.zip"中的代码，开发者不仅能巩固Vue.js和Element-UI的基础知识，还能学习到项目实践中的最佳实践，为未来开发更复杂的Web应用打下坚实基础。
vue基础1-12！！！！！
最新发布
06-08
4. **指令**：Vue.js提供了一系列指令，如`v-bind`（简写`:`）用于绑定属性，`v-if`和`v-show`用于条件渲染，`v-for`用于循环遍历数组或对象，`v-on`（简写`@`）用于事件监听等。 5. **计算属性与侦听器**：计算...
vue基础入门源码-01
05-10
7. **指令深入**：除了基础的`v-if`、`v-for`，Vue还提供了如`v-show`、`v-pre`、`v-cloak`等指令，这些将在源码中得到详细解释。 8. **事件处理**：`v-on`可以绑定事件监听器，但Vue还提供了事件修饰符，如`.stop`...
Vue基础入门源码-03
05-16
2. **模板语法**：Vue的模板语法基于HTML，提供了数据绑定和指令，如`v-bind`用于动态绑定属性，`v-on`用于处理事件，`v-if`和`v-show`用于条件渲染，以及`v-for`用于循环遍历数据。 3. **响应式系统**：Vue的响应...
Vue之v-if、v-show和v-bind
weixin_45153932的博客
04-07 228
1、v-if和v-show使用 v-if和v-show：作用都是用来控制页面中标签是否展示和隐藏 使用：标签v-if=“true|false” v-show=“true|false” 区别： v-show：底层在控制页面标签是否展示时底层使用的是css中display属性来控制标签的展示和隐藏 v-if: 底层在控制页面标签是否展示时底层是直接操作DOM元素，通过对DOM元素删除和添加来控制标签的展示和隐藏 <div id="app-3"> <p v-if="seen">现在你
Vue -- 基础语法指令(v-bind，v-if，v-else，v-else-if，v-for）
天行健 君子以自强不息，地势坤 君子以厚德载物。
05-17 531
1. Vue--基础语法指令(v-bind，v-if，v-else，v-else-if，v-for，v-on) 我们已经成功创建了第一个Vue应用!看起来这跟渲染一个字符串模板非常类似， 但是Vue在背后做了大量工作。现在数据和DOM已经被建立了关联， 所有东西都是响应式的。我们在控制台操作对象属性，界面可以实时更新! 1.1 v-bind ...
v-if和v-bind结合案例
qq_43539854的博客
11-22 415
做了一个简单的登录切换案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <scrip
vue中v-show v-if v-bind的使用
Rosen's
01-22 768
v-show：用于控制页面的标签元素是否展示，底层通过控制元素的display属性来进行标签的显示与隐藏控制 v-if：同样用于控制页面中的标签元素是否展示，底层通过对dom树节点进行添加和删除来控制显示与隐藏控制，效率要低于v-show v-bind：用于给页面中的标签属性绑定相应的属性 <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> ..
关于Vue的学习—v-show、v-if、v-bind
衍生星球的博客
12-22 234
1.v-show指令 v-show：根据表达式的真假切换元素的显示和隐藏。 基础代码： <div id="app"> <img v-show="true" src ="地址"> <img v-show="isShow" src ="地址"> <img v-show="age>=18" src ="地址"> </div> var app = new Vue({ el:"#app",
Vue03_Vue基本指令2/3——显示切换、属性绑定（v-show/v-if/v-bind）
linxwx的博客
02-11 1488
一、v-show 根据表达式的真假，切换元素的显示和隐藏； 二、v-if 根据表达式真假，切换元素的显示与隐藏（直接操纵DOM元素）； 三、v-bind 为元素绑定属性，v-bind: 属性名，简写 : 属性名
VUE基本指令(v-model,v-html,v-text,v-bind,v-if,v-show,v-for,v-on:click,组件,过滤器)
weixin_30858241的博客
05-07 93
https://blog.csdn.net/kingov/article/details/71088073 转载于:https://www.cnblogs.com/hellofangfang/p/9003563.html
Vue学习03——v-show、v-if、v-bind
09-08 199
v-show指令 v-show指令的作用是：根据真假切换元素的显示状态 原理是修改元素的display，实现显示隐藏 指令后面的内容，最终都会解析为布尔值 值为true元素显示，值为false元素隐藏 数据改变后，对应元素的显示状态会同步更新 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid
Vue的基础语法-常用v-on、v-if、v-bind等指令的细节(最详细)
m0_71485750的博客
07-21 1427
v-bind指令是帮助我们动态绑定属性的**前面讲的一系列指令，主要是将值插入到模板内容**中。但是，除了内容需要动态来决定外，某些属性我们也希望动态来绑定。比如动态绑定a元素的href属性；比如动态绑定img元素的src属性；绑定属性我们使用v-bind(以下是官方对v-bind的描述,看不懂了解即可,很多东西我们都是用不上缩写预期参数修饰符.camel-将kebab-caseattribute名转换为camelCase。用法。......
Vue.js基础教程：模板语法与指令详解
本文档主要介绍了Vue的基础知识，包括安装、基本使用、模板语法、指令、参数、用户输入处理、过滤器、条件判断以及循环语句。" Vue.js是一个渐进式框架，允许开发者逐步采用其功能来构建复杂的应用程序。以下是对...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值