返回顶部
首页 > 资讯 > 前端开发 > JavaScript >关于vue src路径动态拼接的小知识
  • 166
分享到

关于vue src路径动态拼接的小知识

2024-04-02 19:04:59 166人浏览 独家记忆
摘要

目录Vue src路径动态拼接第一种:本地添加第二种:从接口中获取图片的路径如何通过变量动态拼接urlvue src路径动态拼接 我是新手 今天写vue 的时候 让这个src 给我弄

vue src路径动态拼接

我是新手 今天写vue 的时候 让这个src 给我弄的懵懵 本来打算弄个轮播图加路径 但是怎么也不显示

第一种:本地添加

如果需要很多图片 一直加div就很烦 所有我就把所有图片写在数组里面

注意 引入图片路径一定要加 require 一定要加 require 一定要加 require

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200312152157911.png

然后我用了mint-ui里面的轮播组件 使用v-for 把图片路径循环出来 使用v-bind:src动态绑定 后面

后面格式为 :src=“item.url” 不要写成 :src={{item.url}}

在这里插入图片描述

在这里插入图片描述

这样就好了

第二种:从接口中获取图片的路径

需要拼接服务器地址

我通过接口 获取了图片地址 放到了一个 空的数组里面

在这里插入图片描述

然后循环 数组

在这里插入图片描述

我的item.pic 就是图片路径 光路径是不行的 需要加上图片路径前面需要加上服务器地址

在这里插入图片描述

这时候注意 一点要加上http 一点要加上http 一点要加上http就是这个给我折磨了好长时间

在这里插入图片描述

直接加号拼接就ok了

如何通过变量动态拼接url

格式:

<a :href="'index.shtml?other='+object.name">这是一个动态链接</a>

需要注意的是href前要加上冒号,href最外层是双引号,中间是单引号。

<div class="tab-content" id="datatable">
	<div v-for="(object,index) in items">
		<!-格式如下,href前要加上冒号--->  
	   <a :href="'index.shtml?other='+object.name">这是一个动态链接</a>
	</div>
</div>
<script>
    $(document).ready(function() {
        App.init();
        //数据列表
        var datatable = new Vue({
            el: '#datatable',
            data: {
                items: [],
            },
        });
        //从服务端获取数据
        getList();
        function getList() {
            $.ajax({
                url : "/sapi/getcluster",
                type : "post",
                dataType : "JSON",
                success : function(result){
                    if(result.status == -1){
                        window.location.href = result.data;
                        return false;
                    }
                    datatable.items = result.data["XXX"];
                }
            });
        }
    });
</script>

动态拼接结果为: href=“index.shtml?other=yyy”

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

--结束END--

本文标题: 关于vue src路径动态拼接的小知识

本文链接: https://lsjlt.com/news/145937.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 关于vue src路径动态拼接的小知识
    目录vue src路径动态拼接第一种:本地添加第二种:从接口中获取图片的路径如何通过变量动态拼接urlvue src路径动态拼接 我是新手 今天写vue 的时候 让这个src 给我弄...
    99+
    2024-04-02
  • 关于Vue中img动态拼接src图片地址的问题
    下面看下Vue中img动态拼接:src图片地址,具体内容如下所示: 使用场景:根据后端返回图片标记来匹配本地图片资源 例如:根据后端返回k1标记,前端生成assets/images/...
    99+
    2024-04-02
  • 关于Vue中过滤器的必懂小知识
    目录前言什么是过滤器如何使用过滤器全局过滤器局部过滤器过滤器可以串联总结前言 大家好,今天来分享下Vue中的过滤器小知识 什么是过滤器 Vue.js 允许你自定义过滤器,可被用于一...
    99+
    2024-04-02
  • vue中如何实现img src动态加载本地json的图片路径
    这篇文章将为大家详细讲解有关vue中如何实现img src动态加载本地json的图片路径,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。目录:注意:本地json文件和jso...
    99+
    2024-04-02
  • 关于c++11与c风格路径拼接的速度对比
    目录这里用c++11的stingstream实现一个用c重新实现一遍c++11的std库中没有提供路径拼接的功能 比如我需要将  "d:\\temp\\robin...
    99+
    2024-04-02
  • 关于vue打包时的publicPath就是打包后静态资源的路径问题
    情况一 当不配置vue.config.js或者没有publicPath属性时,默认访问的静态路径是服务器的根目录 服务器根目录下没有js文件夹所以访问失败,把dist下的js,...
    99+
    2024-04-02
  • 关于vue中根据用户权限动态添加路由的问题
    根据用户的权限,展示不同的菜单页。 知识点 路由守卫(使用了前置守卫):根据用户角色判断要添加的路由 vuex:保存动态添加的路由 难点 每次路由发生变化时都需要调用一次路由守卫,...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作