web学习笔记（五十五）

shan33__2024-05-16 11:10

目录

[1. 配置代码片段的步骤](#1. 配置代码片段的步骤)

[2. 条件判断](#2. 条件判断)

[2.1 v-if、v-else、v-else-if](#2.1 v-if、v-else、v-else-if)

[2.2 v-show](#2.2 v-show)

[2.3 v-show和v-if的区别](#2.3 v-show和v-if的区别)

[3. v-bind和v-on](#3. v-bind和v-on)

[3.1 v-bind](#3.1 v-bind)

[3.2 v-on](#3.2 v-on)

1. 配置代码片段的步骤

在Visual Studio Code中我们可以将常用的代码配置成代码片段，这样就可以在页面上快速输入大段代码了。

（1）通过下列网址将需要配置的代码转换为对应格式：

https://snippet-generator.app/?description=&tabtrigger=&snippet=&mode=vscode

（2） 点击设置页面中的用户代码片段

（3） 点击新建全局代码片段文件，然后在输入框中输入自定义的命令名 eg:vuehtml;然后点回车。

（4）将通过网址转换后的代码粘贴到对应文件中 ，然后保存就可以在页面中使用自定义代码片段了。

2. 条件判断

2.1 v-if、v-else、v-else-if

  • v-if 指令用于选择性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。可以用来控制元素的显示和隐藏。

  • 用v-else指令来表示v-if的指令条件为假时，要渲染的内容。

  • 无论是v-if还是结合 v-else 都只是根据一个条件的真与假来进行选择性的渲染模板内容，若遇到 需要判断多个条件时，则可以使用 案例：成绩等级判断 v-else-if 指令配合 v-if 和 v-else 来完成。

    javascript 复制代码 
    <body>
    <div id="app">
        <!-- 条件判断指令 指令值为true则显示该元素 若值为false则隐藏该元素 -->
        <h1 v-if="age<18">未成年</h1>
        <h1 v-else>成年</h1>
        <h2 v-if="num<5">小于5</h2>
        <h2 v-else-if="num==5">等于5</h2>
        <h2 v-else>大于5</h2>
    </div>
    <script src="./vue.js">

    </script>
    <script>
        new Vue({
            el: '#app',
            data: {
                age: 17,
                num:5,
                isShow:true
            }
        })
    </script>

</body>

  • vue2中不建议v-if和v-for同时使用在同一标签，在vue2中v-for指令的优先级要高于v-if 。这意味着每循环一次都要加载一次if判断，这将会浪费大量性能。如果非要一块使用可以嵌套使用。

    javascript 复制代码 
    <ol>
            <li v-for="(item,index) in userList">
                <div>{{item.name}}</div>
                <div v-if="item.age>=18">成年人</div>
                <div v-else>未年人</div>
                <div v-if="item.sex">男</div>
                <div v-else>女</div>
            </li>
        </ol>

2.2 v-show

v-show 指令是另一个用于根据条件来渲染模板内容，可以用来控制元素的显示和隐藏。

javascript 复制代码 
<body>
    <div id="app">
        <!-- v-show也可以控制元素的显示与隐藏 -->
        <h3 v-show="isShow">好好学习天天向上</h3>
    </div>
    <script src="./vue.js">

    </script>
    <script>
        new Vue({
            el: '#app',
            data: {
                age: 17,
                num:5,
                isShow:true
            }
        })
    </script>

</body>

2.3 v-show和v-if的区别

便于记忆版：

  1. v-show和v-if都可以控制元素的显示和隐藏。
  2. v-show通过设置元素的css样式display来控制元素的显示与隐藏 而 v-if则通过删除插入节点来控制元素的显示与隐藏。
  3. 只渲染一次时一半使用v-if指令 频繁切换使用v-show指令。

正规版：

  1. v-if 是'真正'的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销 毁和重建。换言之在条件为假的时候，dom中是不存在此元素的。
  2. v-show 则不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。换言 之，v-show 元素一开始九被渲染到页面中了，只是通过条件的真与假，改变display的属性值，从而实 现元素的显示和隐藏。
  3. v-if 有更高的切换开销，而 则使用 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换， v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

3. v-bind和v-on

3.1 v-bind

v-bind用来绑定标签属性 值就可以是vue实例中的data中的属性，v-bind还可以简写 v-bind:属性可以简写为:属性。

javascript 复制代码 
<body>
    <div id="app">
        <!--标签由三部分组成的：  标签名  标签内容 标签属性 -->
        <!-- v-bind用来绑定标签属性 值就可以是vue实例中的data中的属性 -->
        <div v-bind:id="divid" v-bind:title="divtitle"></div>
        <!-- v-bind:属性可以简写为:属性 -->
        <a :href="href">百度一下</a>
        <img :src="url" alt="">
    </div>
    <script src="./vue.js">

    </script>
    <script>
      let vm=  new Vue({
            el: '#app',
            data: {
                divid: 'div1',
                divtitle: '练习',
                href:'http://www.baidu.com',
                url:'./12.jpg'
            }
        })
    </script>

</body>

3.2 v-on

  • v-on用来绑定事件，v-on还可以简写 v-on:click="方法名"可以简写为@click="方法名"。

    javascript 复制代码 
            <button v-on:click="add">++</button>
        <button @click="add5(5,$event)">+5</button>

  • 此时需要将被调用的方法写到new出来的Vue实例对象中methods内部。

    javascript 复制代码 
    <script>
        new Vue({
            el: '#app',
            // 存放在data中的数据都是响应式数据，所谓的响应式就是改变数据视图。
            data: {
                user: {
                    name: '张三',
                    age: 18
                }
            },
            // methods方法
            methods: {
                changeuser: function () {
                    this.user = {
                        name: '李四',
                        age: 28
                    }
                }
            }
        })
    </script>

  • 在调用方法时可以写为方法名()也可以直接写方法名。之间写方法名时可以在方法内部直接输出事件对象e，而方法名（）则需要在实参位置写上$event,然后在形参位置写入e，才可以在方法内部输出事件对象e。

javascript 复制代码 
<body>
    <div id="app">
        <h1>{{num}}</h1>
        <button v-on:click="add">++</button>
        <button @click="add5(5,$event)">+5</button>
    </div>
    <script src="./vue.js">

    </script>
    <script>
        new Vue({
            el: '#app',
            // 存放在data中的数据都是响应式数据，所谓的响应式就是改变数据视图。
            data: {
                num: 0
            },
            // methods方法
            methods: {
                add: function (e) {
                    // 事件对象
                    console.log(e);
                    console.log(this);
                    this.num++
                },
                add5(n, e) {
                    console.log(e);
                    this.num += n;
                }
            }
        })
    </script>

</body>

  • v-on也可以通过绑定事件来实现更新对象的效果。

    javascript 复制代码 
    <body>
    <div id="app">
        <h1>{{num}}</h1>
        <button v-on:click="add">++</button>
        <button @click="add5(5,$event)">+5</button>
        <h1>{{msg}}</h1>
        <button v-on:click="changemsg">改变</button>
        <h1>{{user.name}}----{{user.age}}</h1>
        <button v-on:click="changeuser">改变用户信息</button>
    </div>
    <script src="./vue.js">

    </script>
    <script>
        new Vue({
            el: '#app',
            // 存放在data中的数据都是响应式数据，所谓的响应式就是改变数据视图。
            data: {
                num: 0,
                id: 'aaa3',
                msg: '好好学习',
                user: {
                    name: '张三',
                    age: 18
                }
            },
            // methods方法
            methods: {
                add: function (e) {
                    // 事件对象
                    console.log(e);
                    console.log(this);
                    this.num++
                },
                add5(n, e) {
                    console.log(e);
                    this.num += n;
                },
                changemsg: function () {
                    this.msg = '天天向上'
                },
                changeuser: function () {
                    this.user = {
                        name: '李四',
                        age: 28
                    }
                }
            }
        })
    </script>

</body>
相关推荐
计算机学姐15 分钟前
基于微信小程序的调查问卷管理系统
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
地球空间-技术小鱼15 分钟前
嵌入式系统学习
嵌入式硬件·学习
一颗花生米。3 小时前
深入理解JavaScript 的原型继承
java·开发语言·javascript·原型模式
学习使我快乐013 小时前
JS进阶 3——深入面向对象、原型
开发语言·前端·javascript
bobostudio19953 小时前
TypeScript 设计模式之【策略模式】
前端·javascript·设计模式·typescript·策略模式
勿语&4 小时前
Element-UI Plus 暗黑主题切换及自定义主题色
开发语言·javascript·ui
黄尚圈圈4 小时前
Vue 中引入 ECharts 的详细步骤与示例
前端·vue.js·echarts
浮华似水5 小时前
简洁之道 - React Hook Form
前端
dengqingrui1236 小时前
【树形DP】AT_dp_p Independent Set 题解
c++·学习·算法·深度优先·图论·dp
热门推荐
01【经验分享】Ubuntu22.04安装微信(linux官方版)02安卓系列机型永久去除data分区加密 详细步骤解析032024年高教社杯数学建模国赛C题超详细解题思路分析04CTF网络安全大赛简单的web抓包题目：HEADache05组基轨迹建模 GBTM的介绍与实现（Stata 或 R）06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07pve(Proxmox VE)安装i225v网卡驱动08苍穹外卖面试总结09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10RAG 实践- Ollama+RagFlow 部署本地知识库