برای فراخوانی یک متد در یک تگ html از v-on و بعد ایونت جاوااسکریپتی و بعد بعد فانکشنی که باید اجرا بشه استفاده میکنیم .
<input type="text" id="txt-title" v-on:input="changeText">
new Vue({
el: '#first-app',
data: {
title: 'Hello World',
},
methods: {
changeText: function (event) {
this.title = event.target.value;
}
})
<input type="text" id="txt-title" v-on:keyup.enter="changeText">
<h1 v-once>{{title}}</h1>
{{myMethod()}}
new Vue({
el: '#first-app',
data: {
link: 'http://openlearn.ir'
}
})
<a v-bind:href="link">openlearn</a>
new Vue({ el: '#first-app', data: { htmlLink: '<a href="http://openlearn.ir">OpenLearn</a>' } })
{{htmlLink}}<p v-html="htmlLink"></p>
v-bind:click:"myFunction($event)"
v-bind:mousemove.stop:""
keyup.enter.space.esc
<input type="text" v-model="name" /> {{name}}
new Vue({ el: '#first-app', data: { name: 'openlearn', }, }
<div class="demo" :class="{ red: attachRed , blue : !attachRed }" @click="attachRed = !attachRed"></div>
new Vue({ el: '#roxo-app', data: { attachRed: false } }
<div class="demo" :class="divClasses" @click="attachRed = !attachRed"></div>
<div class="demo" :class="{red: attachRed}"></div>
<div class="demo" :class="[color, {blue: attachRed}]"></div>
<input type="text" v-model="color">
<hr>
<h1>Dynamic Styles</h1>
<div class="demo" :style="{backgroundColor: bgColor}"></div>
<div class="demo" :style="divStyles"></div>
<div class="demo" :style="[divStyles, {height: width + 'px'}]"></div>
new Vue({
el: '#roxo-app',
data: {
attachRed: false,
color: 'green',
width: 100,
bgColor: 'gray'
},
computed:{
divClasses: function(){
return {
red: this.attachRed,
blue: !this.attachRed
}
},
divStyles: function(){
return {
backgroundColor: this.bgColor,
width: this.width + 'px'
}
}
}
})
new Vue({ el: '#roxo-app', data: { show: true, foods: ['پیتزا', 'قرمه سبزی','چلو کباب'], persons: [ {name: 'masoud', age: 28, website: 'www.roxo.ir'}, {name: 'morvarid', age: 28, website:'www.google.com'} ] } })
<p v-if="show">شما میتوانید این پاراگراف را ببینید.</p>
<p v-else>شما نمیتوانید این پاراگرافت را مشاهده کنید</p>
<template v-if="show">
<h3>گروه بندی قالب</h3>
<p>این پاراگراف در یک گروه بندی قرار دارد</p>
</template>
<p v-show="show">آیا میتوانید من را ببینید؟</p>
<button type="button" @click="show = !show">تغییر وضعیت</button>
<hr>
<ul>
<li v-for="(food, i) in foods" :key="food">{{food}} - ({{i}})</li>
<button type="button" @click="foods.push('دنده کباب')">افزودن غذای جدید</button>
</ul>
<hr>
<ul dir="ltr">
<li v-for="person in persons">
<span v-for="(value, key, index) in person">
{{key}}: {{value}} - ({{index}})
</span>
</li>
</ul>
تا کنون نظری داده نشده است .
اولین کسی باشید که دیدگاه خود را ثبت می کند .
لطفا منتظر بمانید...