vue的基础指令演示代码及简单案例

news2025/10/31 19:52:24

目录

一、内容绑定，事件绑定

v-text

v-html

v-on

案例：计数器

二、显示切换，属性绑定

v-show

v-if

v-bind

案例：图片切换

三、列表循环，表单元素绑定

v-for

v-on补充

v-model

  1. 通过Vue实现常见的网页效果
  2. 学习Vue指令，以案例巩固知识点
  3. Vue指令指的是，以v-开头的一组特殊语法

一、内容绑定，事件绑定

v-text

  1. v-text指令的作用是：设置标签的内容(textContent)
  2. 默认写法会替换全部内容，使用差值表达式{{}}可以替换指定内容
  3. 内部支持写表达式
<!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">
    <title>v-text指令</title>
</head>

<body>

    <div id="app">
        <h2 v-text="message+'...'">测试</h2>
        <h2 v-text="info+'***'">测试</h2>
        <h2>{{message+'###'}}测试</h2>
    </div>

    <!--开发环境版本，包含了有帮助的命令行警告-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "老陈！",
                info: "前端与移动"
            }
        })
    </script>
</body>

</html>

v-html

  1. v-html指令的作用是：设置元素的innerHTML
  2. 内容中有html结构会被解析为标签
  3. v-text指令无论内容是什么，只会解析为文本
  4. 解析文本使用v-text，需要解析html结构使用v-html
<!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">
    <title>v-html指令</title>
</head>

<body>

    <!-- 2.html结构 -->
    <div id="app">
        <p v-html="content"></p>
        <p v-text="content"></p>
    </div>

    <!--1.开发环境版本，包含了有帮助的命令行警告-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- 3.创建Vue实例 -->
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                //content:老陈
                content: "<a href='http://www.baidu.com'>老百度</a>"
            }
        })
    </script>
</body>

</html>

v-on

  1. v-on指令的作用是:为元素绑定事件
  2. 事件名不需要写on
  3. 指令可以简写为@
  4. 绑定的方法定义在methods属性中
  5. 方法内部通过this关键字可以访问定义在data中数据
<!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">
    <title>v-on指令</title>
</head>

<body>
    <!-- 2.html结构 -->
    <div id="app">
        <!-- 页面中添加一个按钮，将事件与方法关联到一起 -->
        <input type="botton" value="v-on指令" v-on:click="doIt">
        <!-- @click是v-on:click是简写 -->
        <input type="botton" value="v-on简写" @click="doIt">
        <input type="botton" value="v-on双击事件" @dblclick="doIt">
        <h2 @click="changeFood">{{food}}</h2>
    </div>

    <!--1.开发环境版本，包含了有帮助的命令行警告-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- 3.创建Vue实例 -->
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                food: "西蓝花炒蛋"
            },
            //方法
            methods: {
                doIt: function () {
                    alert("做IT");
                },
                changeFood: function () {
                    console.log(this.food);
                    this.food += "好好吃！"
                }
            }
        })
    </script>
</body>

</html>

案例：计数器

  1. 创建Vue示例时：el(挂载点)，data(数据)，methods(方法)
  2. v-on指令的作用是绑定事件，简写为@
  3. 方法中通过this，关键字获取data中的数据
  4. v-text指令的作用是：设置元素的文本值，简写为{{}}
  5. v-html指令的作用是：设置元素的innerHTML

做计数器的思路：

<!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">
    <title>计数器</title>
</head>

<body>
    <!-- 2.html结构 -->
    <div id="app">
        <!-- 页面中添加一个按钮，将事件与方法关联到一起 -->
        <button @click="sub">-</button>
        <!-- v-text=""缩写形式{{}} -->
        <span>{{num}}</span>
        <button @click="add" v-if>+</button>
    </div>

    <!--1.开发环境版本，包含了有帮助的命令行警告-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- 3.创建Vue实例 -->
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                num: 1
            },
            //方法
            methods: {
                add: function () {
                    console.log('add');
                    if (this.num < 10) {
                        this.num += 1;
                    } else {
                        alert('别点了，最大了');
                    }

                },
                sub: function () {
                    console.log('sub');
                    if (this.num > 0) {
                        this.num--;
                    } else {
                        alert('别点了，最小了');
                    }
                }
            }
        })
    </script>
</body>

</html>

二、显示切换，属性绑定

v-show

根据表达值的真假，切换元素的显示和隐藏，如：广告、遮罩层等

  1. v-show指令的作用是：根据真假切换元素的显示状态
  2. 原理是修改元素的display，实现显示隐藏
  3. 指令后面的内容，最终都会解析为布尔值
  4. 值为true元素显示，值为false元素隐藏
  5. 数据改变之后，对应元素的显示状态会同步更新
<!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">
    <title>v-show指令</title>
</head>

<body>
    <!-- 2.html结构 -->
    <div id="app">
        <input type="button" value="切换显示状态" @click="changeIsShow">
        <input type="button" value="累加年龄" @click="addAge">
        <img v-show="isShow" src="C:\Users\Administrator\Desktop\乱七八糟\QQ图片20220113174701.jpg" alt="">
        <img v-show="age>=18" src="C:\Users\Administrator\Desktop\乱七八糟\QQ图片20220113174701.jpg" alt="">

    </div>

    <!--1.开发环境版本，包含了有帮助的命令行警告-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- 3.创建Vue实例 -->
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false,
                age: 17
            },
            methods: {
                changeIsShow: function () {
                    this.isShow = !this.isShow;
                },
                addAge: function () {
                    this.age++;
                }
            }
        })
    </script>
</body>

</html>

v-if

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

  1. v-if指令的作用是：根据表达式的真假切换元素的显示状态
  2. 本质是通过操纵dom元素来切换显示状态
  3. 表达式的值为true，元素存在于dom树中，为false，从dom树中移除
  4. 频繁的切换v-show，反之使用v-if，前者的切换消耗小
<!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">
    <title>Document</title>
</head>

<body>
    <!-- 2.html结构 -->
    <div id="app">
        <input type="button" value="切换显示状态" @click="toggleIsShow">
        <p v-if="isShow">老陈</p>
        <p v-show="isShow">老陈 - v-show修饰</p>
        <h2 v-if="temperature>=35">热死</h2>
    </div>

    <!--1.开发环境版本，包含了有帮助的命令行警告-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- 3.创建Vue实例 -->
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false,
                temperature: 20
            },
            methods: {
                toggleIsShow: function () {
                    this.isShow = !this.isShow;
                }
            }
        })
    </script>
</body>

</html>

v-bind

设置元素的属性（比如：src，title，class）

  1. v-bind指令的作用是：为元素绑定属性
  2. 完整写法是v-bind:属性名
  3. 简写的话可以直接省略v-bind，只保留:属性名
  4. 需要动态的增删class建议使用对象的方式
<!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">
    <title>v-bind指令</title>
    <style>
        .active {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <!-- 2.html结构 -->
    <div id="app">
        <img v-bind:src="imgSrc" alt="">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleIsActive">
        <br>
        <img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleIsActive">
    </div>

    <!--1.开发环境版本，包含了有帮助的命令行警告-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- 3.创建Vue实例 -->
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgSrc: "https://www.itheima.com/images/logo.png",
                imgTitle: "黑马程序员",
                isActive: false
            },
            methods: {
                toggleIsActive: function () {
                    this.isActive = !this.isActive;
                }
            }
        })
    </script>
</body>

</html>

案例：图片切换

  1. 列表数据使用数组保存
  2. v-bind指令可以设置元素属性,比如src
  3. v-show和v-if都可以切换元素的显示状态,频繁切换用v-show

在JavaScript中，通过数组来保存多个数据，数据的取值使用索引来读取。因为是数组，所以可以非常便捷地判断是否为第一张图片或最后一张图片，只需要判断索引的值和数组的长度大小。图片显示内容的更改，本质是图片的src属性被修改了，属性用v-bind指令。a标签在被点击时，要执行逻辑，事件绑定使用v-on指令。在第一张或最后一张图片时，需要隐藏某个a标签。为了实现该功能，可以使用v-if或者v-show指令，由于切换可能较为频繁，考虑性能的情况下，使用v-show会适合一些。

思路：

<!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">
    <title>图片切换</title>
</head>

<body>
    <!-- 2.html结构 -->
    <div id="app">
        <div class="center">

            <h2 class="title">
                <img src="./images/480_480.png" alt="" />
            </h2>
            <!-- 图片 -->
            <img :src="imgArr[index]" alt="">
            <!-- 向左 -->
            <!-- 
                <a href="javascript:void(0)" v-show="index!=0" @click="prev" class="left">
                <img src="images/向左.png" alt="">
                </a>
              等同于下面 
            -->
            <a href="javascript:void(0)" v-if="index!=0" @click="prev" class="left">
                <img src="images/向左.png" alt="">
            </a>

            <!-- 向右 -->
            <a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next" class="right">
                <img src="./images/向右.png" alt="">
            </a>
        </div>
    </div>

    <!--1.开发环境版本，包含了有帮助的命令行警告-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- 3.创建Vue实例 -->

    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgArr: [
                    "./images/200_200.png",
                    "./images/200_200_1.png",
                    "./images/200_200_2.png"
                ],
                index: 0
            },
            methods: {
                prev: function () {
                    this.index--;
                },
                next: function () {
                    this.index++;
                }
            }
        })
    </script>
</body>

</html>

三、列表循环，表单元素绑定

v-for

根据数据生成列表结构

  1. v-for指令的作用是:根据数据生成列表结构
  2. 数组经常和v-for结合使用
  3. 语法是( item,index ) in数据
  4. item和index可以结合其他指令一起使用
  5. 数组长度的更新会同步到页面上,是响应式的

使用v-for生成多个li，语法为：v-for="item in arr"，其中arr是循环的数据名，跟data里面的arr是相对应的，in是关键字，item是遍历的每一项，可以修改名字，符合命名规则即可。now数组里面有5个元素，则会生成5个li标签，如果数组中有内容，会一并生成，如上述有个“你好”，会和5个标签一起生成，如果内部还有后代元素，则后代元素会作为模板一起来生成。可以理解为：v-for指令的作用是把模板的那个标签，还有内部的所有内容，根据数据的个数拷贝若干份。

<!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">
    <title>v-for</title>
</head>

<body>
    <!-- 2.html结构 -->

    <!-- <div id="app">
        <ul>
            <li v-for="item in arr">
                发达城市有：{{item}}
            </li>
    </div> -->
    <div id="app">
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">
        <ul>
            <li v-for="(it,index) in arr">
                {{index+1}}发达城市有：{{it}}
            </li>
        </ul>
        <h2 v-for="item in  milktea" v-bind:title="item.name">
            {{item.name}}
        </h2>
    </div>

    <!--1.开发环境版本，包含了有帮助的命令行警告-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- 3.创建Vue实例 -->
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                arr: ["北京", "上海", "广州", "深圳"],
                milktea: [
                    { name: "百香果双响炮" },
                    { name: "草莓奶冻" }
                ]
            },
            methods: {
                add: function () {
                    this.milktea.push({ name: "芋泥波波奶绿" });
                },
                remove: function () {
                    // 移除最左边的元素
                    this.milktea.shift();
                }
            }
        })
    </script>
</body>

</html>

v-on补充

传递自定义参数,事件修饰符

  1. 事件绑定的方法写成函数调用的形式，可以传入自定义参数
  2. 定义方法时需要定义形参来接收传入的实参
  3. 事件的后面跟上.修饰符可以对事件进行限制
  4. .enter可以限制触发的按键为回车
  5. 事件修饰符有多种

<!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">
    <title>v-on补充</title>
</head>

<body>
    <div id="app">
        <input type="button" value="点击" @click="doIt(666,'老铁')">
        <input type="text" @keyup.enter="sayHi">
    </div>
    <!--1.开发环境版本，包含了有帮助的命令行警告-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
        var app = new Vue({
            el: "#app",
            methods: {
                doIt: function (p1, p2) {
                    console.log("做It")
                    console.log(p1);
                    console.log(p2)
                },
                sayHi: function () {
                    alert("吃了没");
                }
            },
        })
    </script>
</body>

</html>

v-model

获取和设置表单元素的值(双向数据绑定)

  1. v-model指令的作用是便捷的设置和获取表单元素的值
  2. 绑定的数据会和表单元素值相关联
  3. 绑定的数据<——>表单元素的值
<!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">
    <title>v-model</title>
</head>

<body>
    <!-- 2.html结构 -->
    <div id="app">
        <input type="button" value="修改message" @click="setM">
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2>{{message}}</h2>
    </div>

    <!--1.开发环境版本，包含了有帮助的命令行警告-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- 3.创建Vue实例 -->
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "胖子不懂编程"
            },
            methods: {
                getM: function () {
                    alert(this.message);
                    console.log("在输入框敲击回车，执行1次获取message值，以弹窗形式展示")
                },
                setM: function () {
                    this.message = "不喜欢吃苦瓜";
                    console.log("执行1次替换message值，此时会替换掉v-model指令控制的message值")
                }
            }
        })
    </script>
</body>

</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/153165.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

QSFP-DD封装小知识，你了解吗？

QSFP-DD封装小知识，你了解吗？

随着数据中心和高级网络应用中数据流量的上升&#xff0c;光模块市场向更高的速度&#xff0c;更低的功耗和更小的外形或尺寸发展。QSFP-DD封装有什么特征和优势&#xff1f;它与QSFP28/QSFP56模块有什么区别的&#xff1f;本期文章&#xff0c;我们一起了解一下QSFP-DD封装相关…
阅读更多...
【Linux篇】之网络文件系统（nfs）配置

【Linux篇】之网络文件系统（nfs）配置

nfs : Network File System 网络文件系统 作用&#xff1a;linux内核启动之后&#xff0c;通过网络的方式从ubuntu服务器中挂载根文件系统&#xff0c; 而不需要将根文件系统部署到开发板。 1> 安装nfs服务器端 sudo apt-get install nfs-kernel-server2> 修改nfs服务的…
阅读更多...
解读手机拍照的各个参数(AI水印)

解读手机拍照的各个参数(AI水印)

AI水印就是在照片里面自动添加一些文字或者符号&#xff0c;里面有一些固定的水印&#xff0c;目前还不了解能不能识别一些不是固定地方的景色。(目前给出来的是黄山、张家界景点&#xff0c;不晓得华山这种能不能自动添加上水印)。
阅读更多...
Go 1.19.3 channel原理简析

Go 1.19.3 channel原理简析

channel channel和goroutine是Go语言的核心命脉。这篇文章来简单介绍一下Go chan的原理&#xff0c;源码并不好读&#xff0c;应结合gmp调度模型来理解&#xff0c;后续补充吧。 由上图可见&#xff0c;chan的底层结构是一个hchan结构体&#xff0c;其中buf字段指向了一个环形…
阅读更多...
网狐大联盟服务端源码分析-服务核心

网狐大联盟服务端源码分析-服务核心

源码目录结构,如下图,服务工程 cpp文件列表及含义: WHBase64.cpp : base6编码类 WHCommandLine.cpp : 命令行参数操作类 WHDataLocker.cpp : 数据锁类,线程操作数据时用 WHDataQueue.cpp : 数据队列类,异步操作数据用 WHEncrypt.cpp : 加密类 WHIniData.cpp : ini文件操作类 WH…
阅读更多...
VGG的成功之处在哪

VGG的成功之处在哪

VGG 网络可以分为两部分&#xff1a;第⼀部分主要由卷积层和汇聚层组成&#xff0c;第⼆部分由全连接层组成VGG与AlexNet相比&#xff0c;VGG采用小的卷积核和池化层&#xff0c;层数更深&#xff0c;通道数更多&#xff0c;其中每个通道代表着一个FeatureMap&#xff0c;更多的…
阅读更多...
Tomcat组件生命周期管理:LifeCycle

Tomcat组件生命周期管理:LifeCycle

我们已经知道Catalina初始化了Server（它调用了 Server 类的 init 和 start 方法来启动 Tomcat）；你会发现Server是Tomcat的配置文件server.xml的顶层元素，那这个阶段其实我们已经进入到Tomcat内部组件的详解；这时候有一个问题，这么多组件是如何管理它的生命周期的呢？ 引…
阅读更多...
LabVIEW操控应用程序和VI设置

LabVIEW操控应用程序和VI设置

LabVIEW操控应用程序和VI设置属性是VI、对象或应用程序的特性。方法是在VI、对象或应用程序上进行的操作。用户可通过属性节点和调用节点获取和设置本地或远程应用程序实例、VI和对象上的属性和方法。有些应用程序、VI和对象的设置只能通过属性和方法获取和设置。参考下列使用应…
阅读更多...
04【Cookie、Session】

04【Cookie、Session】

文章目录04【Cookie、Session】一、Cookie1.1 Cookie概述1.1.1 协议的状态1.1.2 Cookie的传递流程1.2 Cookie的操作1.2.1 创建Cookie1.2.2 Cookie的销毁1.2.3 Cookie的获取1.2.4 Cookie中使用特殊字符的情况1.2.5 Cookie的携带路径2.2.6 Cookie的删除二、Session2.1 Session概述…
阅读更多...
Deep tabular data learning

Deep tabular data learning

ContentsWhy do tree-based models still outperform deep learning on tabular data?Tabular Data (表格数据)NN 处理表格数据的挑战模型的归纳偏置有何不同&#xff1f;模型本质有何不同&#xff1f;做个小结[CIKM 2019] AutoInt: Automatic Feature Interaction Learning v…
阅读更多...
【前端】Vue项目：旅游App-（13）home：热门数据的网络请求、store和显示

【前端】Vue项目：旅游App-（13）home：热门数据的网络请求、store和显示

文章目录目标过程与代码页面html与css获取数据网络请求store展示数据效果总代码修改或添加的文件service的home.jsservice的index.jsstore的home.jshome.vue本项目博客总结&#xff1a;【前端】Vue项目&#xff1a;旅游App-博客总结 目标 天河区、番禺区…等数据是动态的&…
阅读更多...
智能物流仓储机器人｜海格里斯HEGERLS货物夹抱式防倾倒装置四向穿梭车

智能物流仓储机器人｜海格里斯HEGERLS货物夹抱式防倾倒装置四向穿梭车

在电商以及物流服务行业迅猛发展的当下&#xff0c;自动化立体仓库表面了更加强大的生命力与适应能力。谋求人力节省以及长远发展的电商也需要自动化立体仓库来帮助他们实现这一目标。在现有的技术中会利用穿梭车进行货物转运&#xff0c;但是在转运过程中&#xff0c;由于货物…
阅读更多...
浅谈Web渗透

浅谈Web渗透

中华人民共和国网络安全法 第二十七条 任何个人和组织不得从事非法侵入他人网络、干扰他人网络正常功能、窃取网络数据等危害网络安全的活动:不得提供专门用于从事侵入网络、干扰网络正常功能及防护措施、窃取网络数据等危害网络安全活动的程序、工具&#xff0c;明知他人从事危…
阅读更多...
“一秒”读懂串扰对信号传输时延的影响

“一秒”读懂串扰对信号传输时延的影响

作者&#xff1a;一博科技高速先生成员 刘春在前几期的文章“为什么DDR走线要走同组同层&#xff1f;”中&#xff0c;我们了解了信号在传输线上的传输速度以及微带线与带状线传输的时延差异。同时也有很多热情的网友对影响传输线时延情况给出了各自的见解&#xff0c;比如串扰…
阅读更多...
经营性房产的管理范围

经营性房产的管理范围

经营性房屋是指商业用房或生产用房&#xff0c;是学校出租给外单位使用的房屋&#xff0c;数图互通经营性房屋管理功能范围包括&#xff1a; 定义经营性房屋&#xff08;范围&#xff09;&#xff1a;定义那些房产是可以租赁。 租赁房屋基本信息&#xff1a;建立商铺&#xff…
阅读更多...
【ArcGIS Pro微课1000例】0025：大型商场选择典型案例（缓冲区分析+叠置分析）

【ArcGIS Pro微课1000例】0025：大型商场选择典型案例（缓冲区分析+叠置分析）

文章目录 一、实验分析二、实验数据三、实验过程一、实验分析 合理的商场位置有利于商家营业，方便人们购物。商场选址问题需要考虑很多因素，如地理位置、居民点分布、停车场分布、交通情况等。综合把握这些影响因素对商场的选址显得尤为重要。 二、实验数据 加载专栏实验数…
阅读更多...
赞赞赞！融云收获行业媒体「组团打 Call」

赞赞赞！融云收获行业媒体「组团打 Call」

近期&#xff0c;融云又收获了来自行业和媒体的一波集中“点赞”&#xff0c;分别是—— 产品方面来自掘金的年度创新产品奖&#xff1b; 技术方面来自思否的年度技术团队、掘金的人气技术团队荣誉&#xff1b; 出海方面入选爱分析出海通信厂商全景报告。 打 Call 组团来袭…
阅读更多...
revit绘制扶手楼梯生成，转角断开怎么解决？

revit绘制扶手楼梯生成，转角断开怎么解决？

一、Revit中楼梯扶手连接技巧 在用revit绘制楼梯时扶手可自动生成&#xff0c;但是生成的楼梯扶手在转角处却是断开的。 通常有几种情况&#xff0c;如图1所示情况 碰到这种情况时&#xff0c;可以选择楼梯扶手然后点编辑命令&#xff0c;将原有的楼梯扶手线向后移动一定的距离…
阅读更多...
手把手教你如何通过Java给图片添加文字和图片水印

手把手教你如何通过Java给图片添加文字和图片水印

前言 最近工作上有个需求&#xff0c;动态生成一张图片&#xff0c;具体来说就是基于模版图片动态添加文字和图片&#xff08;文字内容不同&#xff0c;图片数目不同&#xff09;&#xff0c;其中文字大小不全一样&#xff0c;且对位置有所要求。 本文将剖析多个技术方案来实…
阅读更多...
ElementUI

ElementUI

一、axios拦截器1、axios模块的作用&#xff1a;是对基于http请求的封装。在浏览器对异步请求对象XMLHttpRequest进行封装2、拦截器&#xff1a;&#xff08;1&#xff09;请求拦截器&#xff1a;对客户端发起的请求进行统一的前期处理&#xff08;token、时间戳、cookie等&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023