🌵Vue本地应用(显示切换,属性绑定)

简介: 🌵Vue本地应用(显示切换,属性绑定)

1. v-show指令


切换元素的显示状态bc8c021575da4837b4ae542c42d1c575_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.gif

// 源码:
<body>
    <div id="app">
        <button @click="changeisShow">切换显示</button>
        <img src="images/13.jpg" v-show="isShow">
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: true,
            },
            methods: {
                changeisShow: function () {
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>
</body>


总结:


  • v-show指令的作用是:根据真假切换元素的显示状态
  • 原理是修改元素的display,显示隐藏,从下面的gif图中可以看出
  • 指令后面的内容,最终都会解析为布尔值
  • 值为true元素显示,值为false元素隐藏
  • 数据改变之后,对应元素的显示状态会同步更新


2.v-if指令


根据表达式的真假,切换元素的显示与隐藏(操作DOM元素)


语法:


    <div id="app">
        <p v-if="true">我是p1标签</p>
        <p v-if="isShow">我是p2标签</p>
        <p v-if="表达式">我是p3标签</p>
    </div>


        var app = new Vue({
            el: "#app",
            data: {
                isShow: false,
            }
        })

fee00e26172e44dc9c8f81cb359c815d_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.gif


从上面的gif图中我们可以发现v-if指令操作的是DOM树,操作DOM对性能消耗比较大,而v-show指令并没有操作DOM。


总结:


v-if指令的作用是:根据表达式的真假切换元素的显示状态。

本质是通过操作DOM元素来切换显示状态。

表达式的值为true,元素存在DOM树中,值为false,从DOM树中移除。

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


3.v-bind指令


设置元素的属性(比如src,title,class)


语法:


    <div id="app">
        <img v-bind:src="imgSrc">
        <p v-bind:class="isActive?'active':''"></p>
        <!-- 该三元表达式写法较复杂 -->
        <p v-bind:class="{active:isActive}"></p>
    </div>
        var app =new Vue({
            el:"#app",
            data:{
                imgSrc:"图片地址",
                isActive:false
            }
        })

d92e9afc7f454cb4a637c470759e3219_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.gif


总结:


  • v-bind指令的作用是:为元素绑定属性。
  • 完整写法是v-bind:属性名。
  • 简写的话可以直接省略v-bind,只保留:属性名。
  • 需要动态的增删class建议使用对象的方式。


4.图片切换案例

image.png

// 源码:
<body>
    <div id="app">
        <h2>校园食堂</h2>
        <img :src="imgArr[index]" alt="">
        <a href="#" class="prev" @click="clickPrev" v-show="index!=0"></a>
        <a href="#" class="next" @click=clickNext v-show="index<imgArr.length-1"> </a>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgArr: [
                    "images/1.jpg",
                    "images/2.jpg",
                    "images/3.jpg",
                    "images/4.jpg",
                    "images/5.jpg",
                    "images/6.jpg",
                    "images/7.jpg",
                    "images/8.jpg",
                    "images/9.jpg",
                    "images/10.jpg"
                ],
                index: 0
            },
            methods: {
                clickPrev: function () {
                    this.index--
                },
                clickNext: function () {
                    this.index++
                }
            }
        })
    </script>
</body>


总结:


  • 列表数据使用数组保存
  • v-bind指令可以设置元素属性,比如src
  • v-show和v-if都可以切换元素的显示状态,频繁切换用v-show。
相关文章
|
8天前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
|
30天前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
77 1
|
30天前
|
缓存 NoSQL JavaScript
Vue.js应用结合Redis数据库:实践与优化
将Vue.js应用与Redis结合,可以实现高效的数据管理和快速响应的用户体验。通过合理的实践步骤和优化策略,可以充分发挥两者的优势,提高应用的性能和可靠性。希望本文能为您在实际开发中提供有价值的参考。
55 11
|
1月前
|
JavaScript 前端开发
【Vue.js】监听器功能(EventListener)的实际应用【合集】
而此次问题的核心就在于,Vue实例化的时机过早,在其所依赖的DOM结构尚未完整构建完成时就已启动挂载流程,从而导致无法找到对应的DOM元素,最终致使计算器功能出现异常,输出框错误地显示“{{current}}”,并且按钮的交互功能也完全丧失响应。为了让代码结构更为清晰,便于后续的维护与管理工作,我打算把HTML文件中标签内的JavaScript代码迁移到外部的JS文件里,随后在HTML文件中对其进行引用。
52 8
|
1月前
|
敏捷开发 人工智能 JavaScript
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
Figma-Low-Code 是一个开源项目,能够直接将 Figma 设计转换为 Vue.js 应用程序,减少设计师与开发者之间的交接时间,支持低代码渲染和数据绑定。
107 3
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
|
3月前
|
JavaScript 前端开发 API
Vue.js 3:深入探索组合式API的实践与应用
Vue.js 3:深入探索组合式API的实践与应用
|
3月前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
3月前
|
JavaScript 搜索推荐 前端开发
Vue SSR 预渲染的广泛应用场景及其优势
【10月更文挑战第23天】Vue SSR 预渲染技术在众多领域都有着广泛的应用价值,可以显著提升网站的性能、用户体验和搜索引擎优化效果。随着技术的不断发展和完善,其应用场景还将不断拓展和深化
66 2
|
3月前
|
缓存 JavaScript 数据管理
优化 Vue 应用中的性能
【10月更文挑战第22天】优化 Vue 应用性能需要综合考虑多个方面,从数据管理、组件化、虚拟 DOM 操作、网络请求、代码结构等多方面入手,不断进行优化和改进,以提供更流畅的用户体验。同时,要根据具体的应用场景和需求,选择合适的优化策略,确保性能优化的效果和可行性。
|
4月前
|
JavaScript 前端开发 开发者
Vue v-for 进阶指南:in 与 of 的区别及应用场景 | 笔记
Vue.js 中的 v-for 是强大的遍历指令,但其中的 in 和 of 关键字往往被开发者忽视。尽管它们的用法相似,但适用的场景和数据结构却各有不同。本文将详细探讨 v-for 中 in 和 of 的区别、适用场景以及在实际开发中的最佳使用时机。通过理解它们的差异,你将能够编写更加高效、简洁的 Vue.js 代码,灵活应对各种数据结构的遍历需求。
182 6

热门文章

最新文章