彈窗事件
<body>
<div id="app">
<button type="button" v-on:click='handleClick'>click</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
name: '張三'
},
methods:{
handleClick:function(){
alert(this.name);
}
}
})
</script>
</body>
將handleClick方法用v-on:click指令和按鈕button綁定,當點擊click時彈出窗口顯示"張三"
隱藏/顯示切換屬性
<body>
<div id="app">
<h2 v-if="show">{{name}}</h2>
<button type="button" @click='handleClick'>隱藏/顯示</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
name: '張三',
show: true
},
methods:{
handleClick:function(){
this.show = ! this.show;
}
}
})
</script>
</body>
v-on:同等與@;當屬性show顯示true時,v-if渲染<h2>中屬性,當點擊按鈕時this.show取非true成為false,<h2>中屬性就會隱藏
年齡加減
<body>
<div id="app">
<h2>{{age}}</h2>
<button type="button" @click='add'>加一歲</button>
<button type="button" @click="substrct(5)">減5歲</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
age: 30
},
methods:{
add:function(){
this.age + = 1;
},
substrct:function(num){
if(this.age - num < 0){
alert('小于零歲了');
}else{
this.age - = num;
}
}
}
})
</script>
</body>
點擊"加一歲"實現(xiàn)add方法實現(xiàn)自己1;點擊"減5歲"實現(xiàn)substrct方法實現(xiàn)自減,substrct中的函數(shù)為幾就自減幾
關注和取消關注練習
<body>
<div id="app">
<h2>{{name}}</h2>
<span class="followed link" v-show="followed" @click="handleFollow">
<i class="icon-ok"></i>已關注
</span>
<span class="cancle-followed link" v-show="followed===false" @click="handleFollow">
<i class="icon-plus"></i>關注
</span>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
name: '簡書作者',
followed: false
},
methods:{
handleFollow:function(){
this.followed = ! this.followed;
}
}
})
</script>
</body>
<i>為圖標字體,可以在其中查找自身所需的圖標和字體灌具，followed為false時,v-show渲染選擇器名為"cancle-followed link"的行內(nèi)標簽,點擊之后觸發(fā)handleFollow方法this.followed取非，v-show渲染名為"followed link"的行內(nèi)標簽
