جلسه ۶ – انقیاد یا وابسته کردن inpute در ویو جی اس

به نام خدا
اگر در آموزش قبلی دقت کرده باشید ما در مورد نحوه انقیاد داده ها به اچ تی ام ال و کلاس های تگ ها صحبت کردیم
در این آموزش قصد داریم در مورد نحوه انقیاد ویو جی اس به input ها کمی صحبت کنیم . ما یک تکس باکس ایجاد میکنیم و با تغییر متن داخل تکس باکس
تو صفحه ام تغییر ایجاد میشه .در گذشته ما از جی کوئری استفاده میکردیم و تو جی کوئری هم وقتی تغییر تو تکس باکس ایجاد میشد داده رو تشخیص میداد و اونو می تونستیم درون یک المنت دیگه تو صفحه بنویسیم
اجازه بدید با کد توضیح بدم به طور مثال کد زیر رو درنظر بگیرد
<div id=”app”>
<input type=”text”>
<p></p>
</div>

و کد جی کوئری زیر رو در نظر بگیرید .

$(document).ready(function(){
$(‘input[type=text]’).on(‘change’, function(){
$(‘p’).html( $(this).val() );
});
});

خب کد بالا میاید چک میکنه اگه input تکس مون اگه تغییر کرد مقدارشو میگیره و در تک p قرار میده
ما دقیقا همین کار با ویو جی اس خیلی ساده تر با قرار دادن دایرکتیو v-model در تگ input می تونیم انجام بدیم

<div id=”app”>
<input v-model=”message” type=”text”>

<p>{{ message }}</p>
</div>
با قرار دادن v-model و دادن مقدار message (یک متغیر داد ای تو شی ویو جی اسمون هستش ) این مقدار رو به اچ تی ام ال وابسته کردیم
<script src=”https://unpkg.com/vue/dist/vue.js”></script>
<script>
var app = new Vue({
el: ‘#app’,
data: {
message: ‘Enter message’
},
})
</script>
کد بالا هم شی ویو جی اسمون

با ما همراه باشید
موفق باشید

local_offerevent_note خرداد ۵, ۱۳۹۷

account_box ali kaviani


local_offer

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *