Vue JS — Примеры

Vue JS — Примеры

От автора: давайте посмотрим, какие могут быть во Vue JS примеры работы с различными свойствами.

Пример 1: Конвертер валют

<html>
 <head>
 <title>VueJs Instance</title>
 <script type = "text/javascript" src = "js/vue.js"></script>
 </head>
 <body>
 <style>
 #databinding{
 padding: 20px 15px 15px 15px;
 margin: 0 0 25px 0;
 width: auto;
 background-color: #e7e7e7;
 }
 span, option, input {
 font-size:25px;
 }
 </style>
 
 <div id = "databinding" style = "">
 <h1>Currency Converter</h1>
 <span>Enter Amount:</span><input type = "number" v-model.number = "amount" placeholder = "Enter Amount" /><br/><br/>
 <span>Convert From:</span>
 <select v-model = "convertfrom" style = "width:300px;font-size:25px;">
 <option v-for = "(a, index) in currencyfrom"  v-bind:value = "a.name">{{a.desc}}</option>
 </select>
 <span>Convert To:</span>
 <select v-model = "convertto" style = "width:300px;font-size:25px;">
 <option v-for = "(a, index) in currencyfrom" v-bind:value = "a.name">{{a.desc}}</option>
 </select><br/><br/>
 <span> {{amount}} {{convertfrom}} equals {{finalamount}} {{convertto}}</span>
 </div>
 
 <script type = "text/javascript">
 var vm = new Vue({
 el: '#databinding',
 data: {
 name:'',
 currencyfrom : [
 {name : "USD", desc:"US Dollar"},
 {name:"EUR", desc:"Euro"},
 {name:"INR", desc:"Indian Rupee"},
 {name:"BHD", desc:"Bahraini Dinar"}
 ],
 convertfrom: "INR",
 convertto:"USD",
 amount :""
 },
 computed :{
 finalamount:function() {
 var to = this.convertto;
 var from = this.convertfrom;
 var final;
 switch(from) {
 case "INR":
 if (to == "USD") {
 final = this.amount * 0.016;
 }
 if (to == "EUR") {
 final = this.amount * 0.013;
 }
 if (to == "INR") {
 final = this.amount;
 }
 if (to == "BHD") {
 final = this.amount * 0.0059;
 }
 break;
 case "USD":
 if (to == "INR") {
 final = this.amount * 63.88;
 }
 if (to == "EUR") {
 final = this.amount * 0.84;
 }
 if (to == "USD") {
 final = this.amount;
 }
 if (to == "BHD") {
 final = this.amount * 0.38;
 }
 break;
 case "EUR":
 if (to == "INR") {
 final = this.amount * 76.22;
 }
 if (to == "USD") {
 final = this.amount * 1.19;
 }
 if (to == "EUR") {
 final = this.amount;
 }
 if (to == "BHD") {
 final = this.amount * 0.45;
 }
 break;
 case "BHD":
 if (to == "INR") {
 final = this.amount *169.44;
 }
 if (to == "USD") {
 final = this.amount * 2.65;
 }
 if (to == "EUR") {
 final = this.amount * 2.22;
 }
 if (to == "BHD") {
 final = this.amount;
 }
 break
 }
 return final;
 }
 }
 });
 </script>
 </body>
</html>

Результат (Конвертация в USD)

Результат: Конвертация в BHD

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Пояснение − В вышеприведённом примере мы создали конвертер валют, который конвертирует одно значение валюты в избранное значение другой валюты. Мы создали два раскрывающихся списка валют. Когда мы вводим количество, которое нужно конвертировать, в текстовое поле, то же самое отображается ниже после конвертации. Мы используем свойство computed, чтобы выполнить необходимые расчёты для конвертации валют.

Пример 2: Сведения о клиенте

<html>
 <head>
 <title>VueJs Instance</title>
 <script type = "text/javascript" src = "js/vue.js"></script>
 </head>
 <body>
 <style>
 #databinding{
 padding: 20px 15px 15px 15px;
 margin: 0 0 25px 0;
 width: auto;
 }
 span, option, input {
 font-size:20px;
 }
 .Table{
 display: table;
 width:80%;
 }
 .Title{
 display: table-caption;
 text-align: center;
 font-weight: bold;
 font-size: larger;
 }
 .Heading{
 display: table-row;
 font-weight: bold;
 text-align: center;
 }
 .Row{
 display: table-row;
 }
 .Cell{
 display: table-cell;
 border: solid;
 border-width: thin;
 padding-left: 5px;
 padding-right: 5px;
 width:30%;
 }
 </style>
 
 <div id = "databinding" style = "">
 <h1>Customer Details</h1>
 <span>First Name</span>
 <input type = "text" placeholder = "Enter First Name" v-model = "fname"/>
 <span>Last Name</span>
 <input type = "text" placeholder = "Enter Last Name" v-model = "lname"/>
 <span>Address</span>
 <input type = "text" placeholder = "Enter Address" v-model = "addr"/>
 <button v-on:click = "showdata" v-bind:style = "styleobj">Add</button>
 <br/>
 <br/>
 <customercomponent
 v-for = "(item, index) in custdet"
 v-bind:item = "item"
 v-bind:index = "index"
 v-bind:itr = "item"
 v-bind:key = "item.fname"
 v-on:removeelement = "custdet.splice(index, 1)">
 </customercomponent>
 </div>
 
 <script type = "text/javascript">
 Vue.component('customercomponent',{
 template : '<div class = "Table"><div class = "Row"  v-bind:style = "styleobj"><div class = "Cell"><p>{{itr.fname}}</p></div><div class = "Cell"><p>{{itr.lname}}</p></div><div class = "Cell"><p>{{itr.addr}}</p></div><div class = "Cell"><p><button v-on:click = "$emit(\'removeelement\')">X</button></p></div></div></div>',
 props: ['itr', 'index'],
 data: function() {
 return {
 styleobj : {
 backgroundColor:this.getcolor(),
 fontSize : 20
 }
 }
 },
 methods:{
 getcolor : function() {
 if (this.index % 2) {
 return "#FFE633";
 } else {
 return "#D4CA87";
 }
 }
 }
 });
 var vm = new Vue({
 el: '#databinding',
 data: {
 fname:'',
 lname:'',
 addr : '',
 custdet:[],
 styleobj: {
 backgroundColor: '#2196F3!important',
 cursor: 'pointer',
 padding: '8px 16px',
 verticalAlign: 'middle',
 }
 },
 methods :{
 showdata : function() {
 this.custdet.push({
 fname: this.fname,
 lname: this.lname,
 addr : this.addr
 });
 this.fname = "";
 this.lname = "";
 this.addr = "";
 }
 }
 });
 </script>
 </body>
</html>

Результат

Результат после удаления

Объяснение − в вышеприведённом примере у нас есть три текстовых поля для ввода: Имя, Фамилия и Адрес. Также у нас есть кнопка Добавить, которая добавляет значения, введённые в текстовое поле в формате таблицы, и кнопка Удалить.

Формат таблицы создан при помощи компонентов. Нажимая на кнопку мы инициируем взаимодействие с родительским компонентом, используя событие emit для удаления элемента из массива. Введённые значения хранятся в массиве, и они совместно используются дочерним компонентом благодаря свойству prop.

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

VUE JS. Быстрый старт

Практический курс по созданию веб-приложения на VUE JS с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree