- methods屬性
這個名字是固定的，它是一個對象，用于存儲各種方法。{{方法名()}}就可以調(diào)用相應(yīng)的方法。
- 例子練習(xí)代碼
<html>
<head>
<meta charset="utf-8" />
<title></title>
<title>v-on指令練習(xí)</title>
<!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- vue-app的根容器 -->
<div id="app">
<button type="button" @click="handleClick">點我</button>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
name:'軟件1721',
picture:'img/lufei01.jpg'
},
methods:{
handleClick:function(){
alert(this.name);
},
}
})
</script>
</body>
</html>
- v-on指令調(diào)用(語法糖：v-on:click可以簡寫為@click)
- 顯示/隱藏練習(xí)
<html>
<head>
<meta charset="utf-8" />
<title></title>
<title>v-on隱藏于顯示切換練習(xí)</title>
<!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- vue-app的根容器 -->
<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:'軟件1721',
show:true
},
methods:{
handleClick:function(){
//取反
// if(this.show===true){
// this.show=false;
// }else{
// this.show=true;
// }
this.show=!this.show;
}
}
})
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<title>v-on關(guān)注練習(xí)</title>
<!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
<style type="text/css">
.fllowed{
color:#ddd;
}
.link{
cursor:pointer;
}
.cancle-followed{
color:green;
}
</style>
</head>
<body>
<!-- vue-app的根容器 -->
<div id="app">
<h2>{{name}}</h2>
<span class="followed link" v-show="followed" @click="handleFollow">
<i class="icon-ok"></i>已關(guān)注
</span>
<span class="cancle-followed link" v-show="followed===false"
@click="handleFollow">
<i class="icon-plus"></i>關(guān)注
</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>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<title>v-on年齡加減練習(xí)</title>
<!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- vue-app的根容器 -->
<div id="app">
<h2>{{age}}</h2>
<button type="button" @click="add">加一歲</button>
<button type="button" @click="substrct(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){
this.age -=num;
if(this.age-num<=0){
alert('減夠了！');
}else{
this.age-=num;
}
}
}
})
</script>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。
