第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Vue.js 導入對象

Vue.js 導入對象

qq_笑_17 2022-06-05 15:53:36
我在將對象從 App.vue 文件導入組件時遇到問題。但首先我應該解釋一下這個項目的目的。有一個組件(導航抽屜)和一個 App.vue 文件。Navigation 抽屜里面有 vue 的 props,你可以在 App.vue 文件中動態(tài)改變它。問題是我只能使用 Navigation-Drawer 文件中的鏈接。我想編輯它,這樣我就可以根據(jù)需要使用盡可能多的鏈接,甚至不必打開 Navigation-Drawer.vue 文件。在我詳細介紹之前,這里是帶有道具和有限數(shù)量鏈接的文件:應用程序.vue<template>  <div id="app">    <navigation-drawer    name1="TFBern"    name2="Stackoverflow"    name3="YouTube"    name4="Google"    link1="https://vuejs.org"    link2="https://stackoverflow.com"    link3="https://youtube.com"    link4="https://google.com"    />    <img alt="Vue logo" src="./assets/logo.png">    <HelloWorld msg="Welcome to Your Vue.js App"/>  </div></template><script>  import HelloWorld from './components/HelloWorld.vue'  import NavigationDrawer from './components/Navigation-Drawer.vue'  export default {    name: 'App',    components: {      HelloWorld,      NavigationDrawer      }    }</script>導航抽屜.vue<template>    <div class="navigationdrawer">        <span @click="openNav" style="fontsize:30px;cursor:pointer;display:flex;justify-content:center;">&#9776;</span>        <div id="mySidenav" class="sidenav">            <a href="javascript:void(0)" class="closebtn" @click="closeNav">&times;</a>            <a v-bind:href="link1">{{ name1 }}</a>            <a v-bind:href="link2">{{ name2 }}</a>            <a v-bind:href="link3">{{ name3 }}</a>            <a v-bind:href="link4">{{ name4 }}</a>        </div>    </div></template><script>export default {    name: 'NavigationDrawer',    props: {        name1: String,        name2: String,        name3: String,        name4: String,        link1: String,        link2: String,        link3: String,        link4: String },</script>現(xiàn)在,我想到的是創(chuàng)建一個 js 對象,它可以將 App.vue 中的鏈接導入 Drawer。像這樣的東西:<navigation-drawer links="[ {title="Google", link="www.google.ch"} , {title="Youtube", link="www.youtube.com"} , {title=…, link=…} ]"我真的不知道該怎么做...有人可以幫忙嗎?
查看完整描述

1 回答

?
qq_花開花謝_0

TA貢獻1835條經驗 獲得超7個贊

你已經非常接近答案了。更改=為:, 包圍的值,'而不是"這樣你就有一個對象列表


<navigation-drawer v-bind:links="[ {title:'Google', link:'www.google.ch'} , {title:'Youtube', link:'www.youtube.com'} , {title:…, link:…} ]"

然后導航抽屜道具看起來像:


props: {

    links: Array

},

并且 html 通過 av-for和template的鏈接循環(huán):


<div class="navigationdrawer">

    <span @click="openNav" style="fontsize:30px;cursor:pointer;display:flex;justify-content:center;">&#9776;</span>

    <div id="mySidenav" class="sidenav">

        <a href="javascript:void(0)" class="closebtn" @click="closeNav">&times;</a>

        <template v-for=v-for="(link, index) in links">

            <a v-bind:href="link.link"  :key="index">{{ link.title}}</a>

        </template>

    </div>

</div>


查看完整回答
反對 回復 2022-06-05
  • 1 回答
  • 0 關注
  • 333 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號