<div id="app">
<fieldset>
<legend>this is a demo</legend>
<div class="">
<label>姓名：</label>
<input type="text" name="" v-model="NewPerson.name">
</div>
<div class="">
<label>年龄：</label>
<input type="text" name="" v-model="NewPerson.age">
</div>
<div class="">
<label>性别：</label>
<select v-model="NewPerson.sex">
<option value="male">男</option>
<option value="female">女</option>
</select>
</div>
<div>
<button @click="createPerson">创建</button>
</div>
</fieldset>
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>删除</td>
</tr>
<tr v-for="(person, key) of people">
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
<td>{{ person.sex }}</td>
<td :class="'text-center'"><button @click="deletePerson(key)">删除</button></td>
</tr>
</table>
</div>
<script>
var vm = new Vue ({
el: '#app',
data: {
NewPerson: {
name: '',
age: 0,
sex: 'male'
},
people: [
{
name: 'A',
age: 10,
sex: 'male'
},
{
name: 'B',
age: 13,
sex: 'female'
},
{
name: 'C',
age: 15,
sex: 'female'
}
]
},
methods:{
createPerson: function(){
this.people.push(this.NewPerson);
this.NewPerson = {name: '', age: 0, sex: 'male'}
},
deletePerson: function(index){
console.log(index)
this.people.splice(index,1);
}
}
})
</script>
<div id="main" @click="hideTooltip">
<div class="tooltip" v-if="show_tooltip" @click.stop>
<input type="text" v-model="text_content" />
</div>
<p @click.stop="toggleTooltip">{{text_content}}</p>
</div>
<script type="text/javascript">
var demo = new Vue({
el: '#main',
data: {
show_tooltip: false,
text_content: 'Edit me.'
},
methods: {
hideTooltip: function() {
this.show_tooltip = false;
},
toggleTooltip: function() {
this.show_tooltip = !this.show_tooltip;
}
}
});
</script>
<div id="main">
<nav @click.prevent>
<a v-for="item in items" :class="{'show': item.active}" @click="makeActive(item, $index)">{{item.name}}</a>
</nav>
<p>You chose <b>{{active}}</b></p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#main',
data:{
active:'HTML',
items:[
{name:'HTML', active:true},
{name:'CSS', active:false},
{name:'JavaScript', active:false},
{name:'Vue.js', active:false}
]
},
methods: {
makeActive: function(item, index){
this.active = item.name;
for(var i=0; i<this.items.length;i++){
this.items[i].active = false;
}
this.items[index].active = true;
}
}
});
</script>
