methods属性是定义方法的主要区域，在此属性中，可以定义各种自定义函数名的方法以及参数
练习1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的方法练习</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{greeting()}}</h2>
<h2>{{message}}</h2>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods:{
greeting:function(){
return 'Good Morning!';
}
}
})
</script>
</body>
</html>
从练习中可以看出methods方法
methods：{
方法名：function(）}
练习2:传参数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的方法练习</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{greeting('Afternoon')}}</h2>
<h2>{{message}}</h2>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
name: '软件1721'
},
methods: {
greeting: function(time) {
return 'Good ' + time + '!' + this.name;
}
}
})
</script>
</body>
</html>
练习中将Afternoon传给了参数time
采用v-on指令调用方法
分别点击“隐藏/显示”按钮可以切换内容的显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-on指令练习-隐藏和显示</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button type="button" v-on:click="handleClick">隐藏/显示文字</button>
<h2 v-if="show">{{message}}</h2>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
show: true
},
methods: {
handleClick: function() {
if (this.show) {
this.show = false;
} else {
this.show = true;
}
}
}
})
</script>
</body>
</html>
关注/取消关注练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-on指令练习——关注和取消关注</title>
<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">
.link {
cursor: pointer;
}
.followed {
color: rgb(66, 192, 46);
}
.cancel-followed {
color: rgb(150, 150, 150);
}
</style>
</head>
<body>
<div id="app">
<h2>{{user.name}}</h2>
<span class="cancel-followed link" v-show="user.followed === true" @click="handleFollow">
<i class="icon-ok"></i> 已关注
</span>
<span class="followed link" v-show="user.followed === false" @click="handleFollow">
<i class="icon-plus"></i> 关注
</span>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
user: {
name: '简书作者',
followed: true
}
},
methods: {
handleFollow: function() {
if (this.user.followed === true) {
this.user.followed = false;
} else {
this.user.followed = true;
}
}
}
})
</script>
</body>
</html>
年龄的增减练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-on指令练习——年龄的变化</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{age}}</h2>
<!-- 绑定鼠标单击事件，调用无参方法可以不加括号 -->
<button type="button" @click="add">长一岁</button>
<!-- 绑定鼠标双击事件，并传递参数，调用有参方法必须加括号 -->
<button type="button" @dblclick="substract(5)">减五岁</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
age: 30
},
methods: {
add: function() {
this.age++;
},
substract: function(dec) {
this.age -= dec;
}
}
})
</script>
</body>
</html>
单击“长一岁”可以使得age的值加1，双击“减五岁”可以使得age的值减5
网友评论