27 May, 2018

টিউটোরিয়াল

rimonmath

2241 views


Vue JS 2 বাংলা টিউটোরিয়াল #8: Event and methods এর সোর্স কোড :

 

 

 

 

 

Index.html:

<!DOCTYPE html>
<html>
<head>
	<title>Vue Js Bangla Tutorial</title>
	
</head>
<body>

<div id="root">
	<h1>Skills</h1> <hr>
	<ul>
		<li v-for="(skill, i) in skills">
			<p>{{skill}} <button @click="removeSkill(i)">x</button></p>
		</li>
	</ul>

	<input type="text" placeholder="Enter skill" v-model="newSkill">
	<button v-on:click="addSkill()"> Add </button>
	
</div>




<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
	var app = new Vue({
		el: "#root",
		data: {
			newSkill: "",
			skills: ["HTML", "CSS", "JS"] 
		},

		methods:{
			addSkill: function(){
				this.skills.push(this.newSkill);
				this.newSkill = "";
			},

			removeSkill: function(i){
				this.skills.splice(i, 1);
			}
		}
	});
	
</script>

</body>
</html>