如何使用VueJS CDN遍历外部JS文件中的数组？

使用VueJS CDN遍历外部JS文件中的数组可以通过以下步骤实现：

在HTML文件中引入VueJS的CDN链接，例如：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

创建一个Vue实例，并将其绑定到HTML中的一个元素上，例如：

<div id="app">
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</div>

在外部JS文件中定义一个数组，并将其赋值给Vue实例的data属性，例如：

var app = new Vue({
  el: '#app',
  data: {
    items: ['item1', 'item2', 'item3']
  }
});

在HTML文件中使用Vue的模板语法（v-for）来遍历数组并渲染到页面上，例如：

<li v-for="item in items">{{ item }}</li>

完整的示例代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>VueJS CDN Array Traversal</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="item in items">{{ item }}</li>
    </ul>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        items: ['item1', 'item2', 'item3']
      }
    });
  </script>
</body>
</html>

这样，VueJS会根据定义的数组内容自动遍历并渲染到页面上，显示为一个有序列表。每个数组元素都会被渲染为一个li标签，并显示相应的内容。

推荐的腾讯云相关产品：腾讯云CDN（内容分发网络），它可以加速静态资源的传输，提高页面加载速度，更好地支持VueJS的CDN使用。您可以在腾讯云CDN产品介绍页面了解更多信息：腾讯云CDN产品介绍。

如何使用VueJS CDN遍历外部JS文件中的数组？

javascript、vue.js、vuejs2

我已经创建了一个通过CDN使用VueJs的页面，并且正在尝试如何从外部JS文件循环数组中的数据。我尝试导入数据，如下所示，但在我的控制台中出现未定义的错误。我在index.html中的循环如下； <ul> <li v-for="animal in animals

浏览 27提问于2019-09-19得票数 0

2回答

在Vue项目中使用Facebook即时游戏CDN -- Webpack

vue.js、webpack、vuejs2、facebook-javascript-sdk

但是facebook只有一个js文件的cdn。<script src="https://connect.facebook.net/en_US/fbinstant.6.2.js"></script> 如果我在索引文件中导入cdn，我仍然不能在元件中使用它Vue显示未定义的错误。我尝试在body标记之后将其导入index.js

浏览 13提问于2018-12-22得票数 0

2回答

使用PHP和VueJs的约定项目？

php、vue.js

基本上，我不知道如何开始在我的项目中实现VueJ。我应该使用CDN还是通过NPM要求它？NPM将使VueJs包的实现更加容易。我有一个路径/public/ (我自己的框架(用于学习))，其中有一个index.php文件所在的路径，还有一个资产文件夹(它引导的是css/js文件夹)。因此，问题是，您会推荐什么，您将如何

浏览 4提问于2017-08-04得票数 0

回答已采纳

3回答

使用fullCalendar的VueJS :仅在链接index.html中的脚本后加载fullCalendar

javascript、jquery、vue.js、fullcalendar

我想要将fullCalendar加载到我的Vue组件中，但是我得到了错误消息"fullCalendar不是一个函数“。似乎我在index.html文件中加载的所有脚本都是在加载Vue组件之后加载的除非我显式地做了"import $ from

浏览 8提问于2017-06-01得票数 3

1回答

使用VueJS为网站创建可嵌入的聊天Widget

javascript、vue.js、vuejs2、vue-component

我正在构建一个类似于对讲机实时聊天小部件的产品(tawto，漂移，脆等)。基本上，它要做的是向用户网站添加一个小部件，然后呈现一个聊天框(用简单的话来说)。我计划在整个项目中使用VueJS。这就是我的想法。我们为用户提供可嵌入的js片段。它将使用id = "app“(或类似的东西)向身体添加一个div。然后相同的脚本将注入VueJS编译的代码。还将添加一些外部脚本，如s

浏览 4提问于2017-09-24得票数 0

3回答

如何在没有NPM和Webpack的情况下将CDN包含到VueJS命令行工具中？

javascript、webpack、vue.js、datatables、cdn

我是VueJS和Webpack的新手。我已经使用VueJS CLI创建了一个项目，并尝试使用它。我需要在我的代码中插入一个CDN。当使用标准的HTML、CSS和JS解决方案时，我会像这样包括CDN：<!/v/dt/dt-1.10.16/sl-1.2.5/datatables.min.js"&g

浏览 0提问于2018-03-17得票数 23

回答已采纳

1回答

当尝试下载某些视频时，它重定向到一个新的URL，然后视频开始播放。“可弃内容类型”未从服务器接收。

vue.js、nginx、video、axios、content-type

为此，我创建了一个Button并附加了一个应该触发相关视频下载的函数。但我只能下载视频的链接，而不是视频。我可以用外部下载器下载视频，或者简单地将URL拖到浏览器的下载部分。我尝试了多种方法来解决这个问题：const blob = new Blob([this.src_url], { type: 'video/mp4' }) const/ 'https://

浏览 11提问于2022-10-27得票数 0

1回答

如何在WordPress站点中呈现我的Vuejs应用程序

javascript、wordpress、vue.js

在我的functions.php文件中，我有这样的代码： // Load both vue from the CDN as well as the scripts for the slideout cart"/vue/slideout-cart/dist/slideout-cart.js"); wp_register_script('vuejs_source',

浏览 34提问于2021-02-11得票数 0

1回答

如何将cdn css文件添加到Vue Cli 3工程？

vue.js、vue-cli

我尝试在我的vue-cli-3项目中包含一个cdn外部css文件，所以我在public/index.html文件中添加了css文件，如下所示：但是css不包含在生成的index.html文件中。这曾经在vuejs2

浏览 106提问于2018-07-13得票数 16

回答已采纳

1回答

使用sw-precache缓存外部资源

progressive-web-apps、sw-precache

我试图让sw-precache预缓存外部CDN资源，但是生成的service-worker.js不包含precacheConfig数组中的CDN url。这就是我的gulpfile 'http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.mi

浏览 1提问于2016-11-14得票数 4

回答已采纳

1回答

如何在Laravel 5.7中使用Vue.js文件(不是CDN)？

php、vuejs2、laravel-blade、laravel-5.7

我在laravel 5.7中几乎完成了我的管理面板，但是需要为一些组件使用VueJS。我知道Vue默认是随laravel一起提供的，并且还看到了laravel中resources/js目录下的app.js文件。但是，有没有可能我可以使用我下载的Vue.js文件，并将其与脚本标签一起导入？我尝试将脚本和vue代码放在刀片文件</e

浏览 0提问于2019-04-15得票数 0

1回答

如何在没有npm/node的Django中使用VUEJS

django、django-rest-framework、vuejs2

我的应用程序的目标是使用VueJS作为前端(从而执行应用程序接口调用)。但这里有一个限制:我不能使用npm/node，只能将脚本导入我的Django服务器(显然是在/static中)，并将它们导入到index.html文件中，这要归功于Django模板呈现。无论如何，我想使用VuesJS组件来存储每个资源实例，并且，正如我的同事问我的那样，看看

浏览 8提问于2018-11-30得票数 1

1回答

用vuejs项目实现hls.js库

javascript、vue.js、http-live-streaming、hls.js

我需要一些帮助，试图找出如何在vuejs中使用库，因为它没有关于如何使用vue实现它的特定文档。这里的情况是，我必须从一个api中获取m3u8，我可以用标记和cdn使它从一个基本的html中工作，但是当我尝试用vuejs实现它时，它不起作用，任何帮助都是值得感谢的。到目前为止，这就是我所掌握的：首先尝试：使用cdn</

浏览 5提问于2020-08-07得票数 3

1回答

使用vuejs3 CDN在页面中声明外部组件的正确方法

javascript、vue.js、vuejs3

我是ASL.NET核心开发人员，我尝试使用vuejs来创建一些复杂的表单。为了学习如何使用它，我创建了静态html文件，以了解组件在vuejs中是如何工作的。我有以下例子： } template: `<h2>Hello with

浏览 23提问于2022-03-06得票数 2

回答已采纳

5回答

如何在VueJs中的模板中加载外部html文件

vue.js、vuejs2、vue-component、vue-router

我刚接触过vue js。我只是在创建一个简单的项目，其中我只包括vuejs通过CDN。不使用节点/npm或cli。我以前在有ng-include的地方工作过，可以加载外部html文件。我在找和vue类似的东西。重

浏览 4提问于2017-11-02得票数 21

回答已采纳

1回答

如何从url导入模块？

javascript、vue.js

我在我的应用程序中使用了vuejs npm包。由于某些原因，我需要直接使用cdn url，所以让我们假设这是cdn lib https://cdn.jsdelivr.net/npm/my-package@1.1.0/dist/my-package.umd.min.js现在我不知道如何在vue应用程序中使用它。任何帮助都将不胜感激。谢谢：)

浏览 30提问于2021-09-23得票数 0

1回答

如何在nuxtjs中使用fancybox

vue.js、fancybox、nuxtjs

如何在nuxtjs中使用fancybox。在vuejs中，它工作得很好，但是当我用fancybox在nuxtjs上编写相同的应用程序时，它就不能正常工作了。它只是发送到相应的链接。nuxt.config.js...... { href: "https://cdn.jsdelivr.net/npm/jqu

浏览 1提问于2020-09-13得票数 0

回答已采纳

1回答

使用vue cdn分隔组件文件

express、vue.js、cdn

我有一个express服务器，它只为一个GET路由提供服务，并返回文件'public/app.html'我不想有一个很大的组件！如何将每个组件放在不同的文件中？我创

浏览 10提问于2019-11-21得票数 0

7回答

vue组件中外部导入方法的VueJS访问

javascript、vue.js、vuejs2、export、vue-component

我有一个外部Java脚本文件something.js document.getElementById("demo").innerHTML="Hello World;这是我的vue组件Dashboard.vue <div> <button type="button/something.js

浏览 0提问于2018-03-07得票数 22

回答已采纳

3回答

引导图标在Vuejs模板中使用时不会出现在前端。

html、css、twitter-bootstrap、bootstrap-4、vuejs2

我正在尝试使用Vue.JS构建Web应用程序，而在我的应用程序中，我试图使用[Bootstrap Icons][1]。但由于某种原因，即使在添加图标之后，它们也不会出现在屏幕上。我做了以下步骤：npm install bootstrap-iconsimport '

浏览 6提问于2021-07-02得票数 13

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

如何使用VueJS CDN遍历外部JS文件中的数组？

相关·内容

如何使用VueJS CDN遍历外部JS文件中的数组？

在Vue项目中使用Facebook即时游戏CDN -- Webpack

使用PHP和VueJs的约定项目？

使用fullCalendar的VueJS :仅在链接index.html中的脚本后加载fullCalendar

使用VueJS为网站创建可嵌入的聊天Widget

如何在没有NPM和Webpack的情况下将CDN包含到VueJS命令行工具中？

当尝试下载某些视频时，它重定向到一个新的URL，然后视频开始播放。“可弃内容类型”未从服务器接收。

如何在WordPress站点中呈现我的Vuejs应用程序

如何将cdn css文件添加到Vue Cli 3工程？

使用sw-precache缓存外部资源

如何在Laravel 5.7中使用Vue.js文件(不是CDN)？

如何在没有npm/node的Django中使用VUEJS

用vuejs项目实现hls.js库

使用vuejs3 CDN在页面中声明外部组件的正确方法

如何在VueJs中的模板中加载外部html文件

如何从url导入模块？

如何在nuxtjs中使用fancybox

使用vue cdn分隔组件文件

vue组件中外部导入方法的VueJS访问

引导图标在Vuejs模板中使用时不会出现在前端。

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐