<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<style>
.active{
background-color: red;
}
#root{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<div id="root">
<ul>
<li v-for="(skill, i) in skills">
<p>
{{skill}} <button @click="removeSkill(i)">x</button>
</p>
</li>
<input type="text" name="" v-model="addskill">
<button type="" @click="addNewskill()">add</button>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>
<script>
var app = new Vue({
el: "#root",
data: {
addskill: '',
skills: ['php', 'html', 'css']
},
methods:{
addNewskill: function(){
this.skills.push(this.addskill);
this.addskill='';
},
removeSkill: function(i){
this.skills.splice(i, 1);
}
}
});
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<style>
.active{
background-color: red;
}
#root{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<div id="root">
<ul>
<li v-for="(skill, i) in skills">
<p>
{{skill}} <button @click="removeSkill(i)">x</button>
</p>
</li>
<input type="text" name="" v-model="addskill">
<button type="" @click="addNewskill()">add</button>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>
<script>
var app = new Vue({
el: "#root",
data: {
addskill: '',
skills: ['php', 'html', 'css']
},
methods:{
addNewskill: function(){
this.skills.push(this.addskill);
this.addskill='';
},
removeSkill: function(i){
this.skills.splice(i, 1);
}
}
});
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
0 comments:
Post a Comment