一行上有多个<select>下拉列表(Foundation css import)

时间:2017-12-15 16:00:30

标签: javascript html css vue.js

目前正试图获得2下拉&lt; select&gt;元素坐在同一条线上,因为它们是一个在另一个上面,无论我是否让它们更短,所以它们绝对适合。 我使用的是第三方CSS库:Zurb的基金会 我已经看过这个stackoverflow帖子,但它似乎没有帮助我。 有什么建议? 运行下面剪切的代码,看看发生了什么 NB。我不想使用JQuery。 &#13; &#13; const BaseUrl =&#34; https://newsapi.org/v2/" ;;&#13; const ApiKey =&#34; myapikey&#34 ;;&#13; &#13; function buildUrlSource(source){&#13;     返回BaseUrl +&#34;头条新闻?来源=&#34; + source +&#34;&amp; apiKey =&#34; + ApiKey;&#13; }&#13; function buildUrlCountry(country){&#13;     返回BaseUrl +&#34;来源?language = en&amp; country =&#34; + country +&#34;&amp; apiKey =&#34; + ApiKey;&#13; }&#13; &#13; const vm = new Vue({&#13;     el:&#39;#app&#39;,&#13;     数据:{&#13;         国家:[&#13;             {&#13;                 名称:&#39;澳大利亚&#39;,&#13;                 代码:&#39; au&#39;&#13;             },&#13;             {&#13;                 名称:&#39; USA&#39;,&#13;                 代码:&#39;我们&#39;&#13;             },&#13;             {&#13;                 姓名:&#39;英国&#39;,&#13;                 代码:&#39; gb&#39;&#13;             },&#13;             {&#13;                 名称:&#39;加拿大&#39;,&#13;                 代码:&#39; ca&#39;&#13;             },&#13;             {&#13;                 名称:&#39;意大利&#39;,&#13;                 代码:&#39;它&#39;&#13;             },&#13;             {&#13;                 名称:&#39;印度&#39;,&#13;                 代码:&#39;&#39;&#13;&#39;             },&#13;             {&#13;                 名称:&#39;南非&#39;,&#13;                 代码:&#39; za&#39;&#13;             },&#13;             {&#13;                 名称:&#39;爱尔兰&#39;,&#13;                 代码:&#39; ie&#39;&#13;             }&#13;         ]&#13;       来源:[],&#13;       结果:[],&#13;       loadSource:true,&#13;       loadCountry:true,&#13;       标题:&#39;&#39;,&#13;       来源:&#39; bbc-news&#39;,//默认新闻提要BBC新闻&#13;       国家:&#39; gb&#39; //默认国家/地区(gb)&#13;     },&#13;     mount(){&#13;         this.getSources(&#39; GB&#39); //默认为英国新闻&#13;         this.getPosts(&#39; BBC-新闻&#39); // BBC新闻的默认视图&#13;     },&#13;     方法:{&#13;         getPosts(source){&#13;             let url = buildUrlSource(source);&#13;             axios.get(url).then((response)=&gt; {&#13;                 this.results = response.data.articles;&#13;                 this.title =&#34;来自&#39;&#34;的十大标题+ this.source +&#34;&#39;&#34;;&#13;             })。catch(error =&gt; {console.log(error)})&#13;             this.loadSource = false;&#13;         },&#13;         getSources(country){&#13;             let url = buildUrlCountry(country);&#13;             axios.get(url).then((response)=&gt; {&#13;                 this.sources = response.data.sources;&#13;             })。catch(error =&gt; {console.log(error)})&#13;             this.loadCountry = true;&#13;         },&#13;         isLoaded(){&#13;             return(this.loadCountry&amp;&amp; this.loadSource);&#13;         }&#13;     }&#13;   });&#13; &lt;!DOCTYPE html&gt;&#13; &lt ;! - 新闻APP - &gt;&#13; &lt ;! - https://www.sitepoint.com/fetching-data-third-party-api-vue-axios/ - &gt;&#13; &#13; &lt; html lang =&#34; en&#34;&gt;&#13;   &LT; HEAD&GT;&#13;     &lt; meta charset =&#34; utf-8&#34;&gt;&#13;     &lt; title&gt;有史以来最伟大的新闻应用&lt; / title&gt;&#13;     &lt; link rel =&#34; stylesheet&#34; HREF =&#34; HTTPS://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css"&GT;&#13;     &lt; script src =&#34; https://unpkg.com/axios/dist/axios.min.js"&gt;&lt; / script&gt;&#13;     &lt; link rel =&#34; stylesheet&#34; HREF =&#34; appCSS.css&#34;&GT; &#13;   &LT; /头&GT;&#13;   &LT;身体GT;&#13; &#13;     &lt; div class =&#34; container&#34; ID =&#34;应用&#34;&GT;&#13;       &lt; h3 class =&#34; text-center&#34;&gt;标题新闻&lt; / h3&gt;&#13; &#13;       &lt; section class =&#34; callout secondary&#34;&gt;&#13;         &lt; h5 class =&#34; text-center&#34;&gt;应用过滤器&lt; / h5&gt;&#13;         &LT;形式&GT;&#13;           &lt; div class =&#34; row&#34;&gt;&#13;             &lt; div class =&#34; large-1&#34;&gt;&#13;               &LT;标签&gt;&#13;                 国家:&#13;                 &lt; select v-model =&#34; country&#34; V-上:变化=&#34; getSources(国家)&#34;&GT;&#13;                   &lt; option v-for =&#34;国家/地区的项目&#34; :value =&#34; item.code&#34;&gt; {{item.name}}&lt; / option&gt;&#13;                 &LT; /选择&GT;&#13;               &LT; /标签&gt;&#13;               &LT;标签&gt;&#13;                 新闻来源:&#13;                 &lt; select v-model =&#34; source&#34; V-上:变化=&#34; getPosts(源)&#34;&GT;&#13;                   &lt; option v-for =&#34;来源中的项目&#34; :value =&#34; item.id&#34;&gt; {{item.name}}&lt; / option&gt;&#13;                 &LT; /选择&GT;&#13;              &LT; /标签&gt;&#13;             &LT; / DIV&GT;&#13;           &LT; / DIV&GT;&#13;         &LT; /形式&GT;&#13;       &LT; /节&gt;&#13; &#13;     &LT; / DIV&GT;&#13; &#13; &#13;     &lt; script src =&#34; https://unpkg.com/vue"&gt;&lt; / script&gt;&#13;     &lt; script src =&#34; app.js&#34;&gt;&lt; / script&gt;&#13;   &LT; /体&GT;&#13; &LT; / HTML&GT;&#13; &#13; &#13;

1 个答案:

答案 0 :(得分:0)

因为我使用的是基础CSS库,所以我进行了一些研究,发现我在label / select周围的medium-6处遗漏了一些语法。标签

我的columns班级标签看起来好像丢失了<div>,最重要的是<div class="medium-6 columns"> <label>Country: <select v-model="country" v-on:change="getSources(country)"> <option v-for="item in countries" :value="item.code">{{ item.name }}</option> </select> </label> </div>

语法应该是这样的:

# include <bits/stdc++.h>
using namespace std;
int c[20][20];
void initialize()
{
    for(int i=0;i<20;i++) 
        for(int j=i;j<20;j++)
            c[i][j]=-1;
}
int binomCoeff(int n,int k)
{
    if(k==0||k==n) return 1;
    if(c[n][k]!=-1)
        return c[n][k];
    return c[n][k] =  binomCoeff(n-1,k-1) + binomCoeff(n-1,k);
}

int main()
{
    initialize();
    cout<<binomCoeff(4,2)<<endl;
}