Skip to content

Instantly share code, notes, and snippets.

@AhmedHelalAhmed

AhmedHelalAhmed/index.html

Last active January 25, 2020 16:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save AhmedHelalAhmed/d03f861c14422fcf2c7d5be895984f59 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save AhmedHelalAhmed/d03f861c14422fcf2c7d5be895984f59 to your computer and use it in GitHub Desktop.
Download ZIP
testplayground
Raw
index.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="title">vuejs countries example: </div>
<select>
<option slected>Select country</option>
<option v-for="country in countries" :value="country.name">
{{ country.name }}</option
>
</select>
</div>
</body>
</html>
Raw
playground.json
{
"scripts": [],
"styles": []
}
Raw
script.js
new Vue({
el: "#app",
data: {
countries: [
{ name: "AFGHANISTAN" },
{ name: "ALBANIA" },
{ name: "ALGERIA" },
{ name: "AMERICAN SAMOA" },
{ name: "ANDORRA" },
{ name: "ANGOLA" },
{ name: "ANGUILLA" },
{ name: "ANTARCTICA" },
{ name: "ANTIGUA AND BARBUDA" },
{ name: "ARGENTINA" },
{ name: "ARMENIA" },
{ name: "ARUBA" },
{ name: "AUSTRALIA" },
{ name: "AUSTRIA" },
{ name: "AZERBAIJAN" },
{ name: "BAHAMAS" },
{ name: "BAHRAIN" },
{ name: "BANGLADESH" },
{ name: "BARBADOS" },
{ name: "BELARUS" },
{ name: "BELGIUM" },
{ name: "BELIZE" },
{ name: "BENIN" },
{ name: "BERMUDA" },
{ name: "BHUTAN" },
{ name: "BOLIVIA" },
{ name: "BOSNIA AND HERZEGOVINA" },
{ name: "BOTSWANA" },
{ name: "BRAZIL" },
{ name: "BRUNEI DARUSSALAM" },
{ name: "BULGARIA" },
{ name: "BURKINA FASO" },
{ name: "BURUNDI" },
{ name: "CAMBODIA" },
{ name: "CAMEROON" },
{ name: "CANADA" },
{ name: "CAPE VERDE" },
{ name: "CAYMAN ISLANDS" },
{ name: "CENTRAL AFRICAN REPUBLIC" },
{ name: "CHAD" },
{ name: "CHILE" },
{ name: "CHINA" },
{ name: "CHRISTMAS ISLAND" },
{ name: "COCOS (KEELING) ISLANDS" },
{ name: "COLOMBIA" },
{ name: "COMOROS" },
{ name: "CONGO" },
{ name: "CONGO, THE DEMOCRATIC REPUBLIC OF THE" },
{ name: "COOK ISLANDS" },
{ name: "COSTA RICA" },
{ name: "COTE D IVOIRE" },
{ name: "CROATIA" },
{ name: "CUBA" },
{ name: "CYPRUS" },
{ name: "CZECH REPUBLIC" },
{ name: "DENMARK" },
{ name: "DJIBOUTI" },
{ name: "DOMINICA" },
{ name: "DOMINICAN REPUBLIC" },
{ name: "ECUADOR" },
{ name: "EGYPT" },
{ name: "EL SALVADOR" },
{ name: "EQUATORIAL GUINEA" },
{ name: "ERITREA" },
{ name: "ESTONIA" },
{ name: "ETHIOPIA" },
{ name: "FALKLAND ISLANDS (MALVINAS)" },
{ name: "FAROE ISLANDS" },
{ name: "FIJI" },
{ name: "FINLAND" },
{ name: "FRANCE" },
{ name: "FRENCH POLYNESIA" },
{ name: "GABON" },
{ name: "GAMBIA" },
{ name: "GEORGIA" },
{ name: "GERMANY" },
{ name: "GHANA" },
{ name: "GIBRALTAR" },
{ name: "GREECE" },
{ name: "GREENLAND" },
{ name: "GRENADA" },
{ name: "GUAM" },
{ name: "GUATEMALA" },
{ name: "GUINEA" },
{ name: "GUINEA-BISSAU" },
{ name: "GUYANA" },
{ name: "HAITI" },
{ name: "HOLY SEE (VATICAN CITY STATE)" },
{ name: "HONDURAS" },
{ name: "HONG KONG" },
{ name: "HUNGARY" },
{ name: "ICELAND" },
{ name: "INDIA" },
{ name: "INDONESIA" },
{ name: "IRAN, ISLAMIC REPUBLIC OF" },
{ name: "IRAQ" },
{ name: "IRELAND" },
{ name: "ISLE OF MAN" },
{ name: "ISRAEL" },
{ name: "ITALY" },
{ name: "JAMAICA" },
{ name: "JAPAN" },
{ name: "JORDAN" },
{ name: "KAZAKSTAN" },
{ name: "KENYA" },
{ name: "KIRIBATI" },
{ name: "KOREA DEMOCRATIC PEOPLES REPUBLIC OF" },
{ name: "KOREA REPUBLIC OF" },
{ name: "KOSOVO" },
{ name: "KUWAIT" },
{ name: "KYRGYZSTAN" },
{ name: "LAO PEOPLES DEMOCRATIC REPUBLIC" },
{ name: "LATVIA" },
{ name: "LEBANON" },
{ name: "LESOTHO" },
{ name: "LIBERIA" },
{ name: "LIBYAN ARAB JAMAHIRIYA" },
{ name: "LIECHTENSTEIN" },
{ name: "LITHUANIA" },
{ name: "LUXEMBOURG" },
{ name: "MACAU" },
{ name: "MACEDONIA, THE FORMER YUGOSLAV REPUBLIC OF" },
{ name: "MADAGASCAR" },
{ name: "MALAWI" },
{ name: "MALAYSIA" },
{ name: "MALDIVES" },
{ name: "MALI" },
{ name: "MALTA" },
{ name: "MARSHALL ISLANDS" },
{ name: "MAURITANIA" },
{ name: "MAURITIUS" },
{ name: "MAYOTTE" },
{ name: "MEXICO" },
{ name: "MICRONESIA, FEDERATED STATES OF" },
{ name: "MOLDOVA, REPUBLIC OF" },
{ name: "MONACO" },
{ name: "MONGOLIA" },
{ name: "MONTENEGRO" },
{ name: "MONTSERRAT" },
{ name: "MOROCCO" },
{ name: "MOZAMBIQUE" },
{ name: "MYANMAR" },
{ name: "NAMIBIA" },
{ name: "NAURU" },
{ name: "NEPAL" },
{ name: "NETHERLANDS" },
{ name: "NETHERLANDS ANTILLES" },
{ name: "NEW CALEDONIA" },
{ name: "NEW ZEALAND" },
{ name: "NICARAGUA" },
{ name: "NIGER" },
{ name: "NIGERIA" },
{ name: "NIUE" },
{ name: "NORTHERN MARIANA ISLANDS" },
{ name: "NORWAY" },
{ name: "OMAN" },
{ name: "PAKISTAN" },
{ name: "PALAU" },
{ name: "PANAMA" },
{ name: "PAPUA NEW GUINEA" },
{ name: "PARAGUAY" },
{ name: "PERU" },
{ name: "PHILIPPINES" },
{ name: "PITCAIRN" },
{ name: "POLAND" },
{ name: "PORTUGAL" },
{ name: "PUERTO RICO" },
{ name: "QATAR" },
{ name: "ROMANIA" },
{ name: "RUSSIAN FEDERATION" },
{ name: "RWANDA" },
{ name: "SAINT BARTHELEMY" },
{ name: "SAINT HELENA" },
{ name: "SAINT KITTS AND NEVIS" },
{ name: "SAINT LUCIA" },
{ name: "SAINT MARTIN" },
{ name: "SAINT PIERRE AND MIQUELON" },
{ name: "SAINT VINCENT AND THE GRENADINES" },
{ name: "SAMOA" },
{ name: "SAN MARINO" },
{ name: "SAO TOME AND PRINCIPE" },
{ name: "SAUDI ARABIA" },
{ name: "SENEGAL" },
{ name: "SERBIA" },
{ name: "SEYCHELLES" },
{ name: "SIERRA LEONE" },
{ name: "SINGAPORE" },
{ name: "SLOVAKIA" },
{ name: "SLOVENIA" },
{ name: "SOLOMON ISLANDS" },
{ name: "SOMALIA" },
{ name: "SOUTH AFRICA" },
{ name: "SPAIN" },
{ name: "SRI LANKA" },
{ name: "SUDAN" },
{ name: "SURINAME" },
{ name: "SWAZILAND" },
{ name: "SWEDEN" },
{ name: "SWITZERLAND" },
{ name: "SYRIAN ARAB REPUBLIC" },
{ name: "TAIWAN, PROVINCE OF CHINA" },
{ name: "TAJIKISTAN" },
{ name: "TANZANIA, UNITED REPUBLIC OF" },
{ name: "THAILAND" },
{ name: "TIMOR-LESTE" },
{ name: "TOGO" },
{ name: "TOKELAU" },
{ name: "TONGA" },
{ name: "TRINIDAD AND TOBAGO" },
{ name: "TUNISIA" },
{ name: "TURKEY" },
{ name: "TURKMENISTAN" },
{ name: "TURKS AND CAICOS ISLANDS" },
{ name: "TUVALU" },
{ name: "UGANDA" },
{ name: "UKRAINE" },
{ name: "UNITED ARAB EMIRATES" },
{ name: "UNITED KINGDOM" },
{ name: "UNITED STATES" },
{ name: "URUGUAY" },
{ name: "UZBEKISTAN" },
{ name: "VANUATU" },
{ name: "VENEZUELA" },
{ name: "VIET NAM" },
{ name: "VIRGIN ISLANDS, BRITISH" },
{ name: "VIRGIN ISLANDS, U.S." },
{ name: "WALLIS AND FUTUNA" },
{ name: "YEMEN" },
{ name: "ZAMBIA" },
{ name: "ZIMBABWE" }
]
}
});
Raw
style.css
.title {
font-size: 18px;
font-weight: bold;
margin-bottom: 1.5%;
background-color: black;
color: white;
display: inline-block;
padding: 2%;
text-transform: capitalize;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment