这节我们主要学习methods属性, 这个名字是固定的，它是一个对象，用于存储各种方法。{{方法名()}}就可以调用相应的方法。
示例代码
<!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>
那么，既然是方法，就可以传值来满足不同的需求。在调用方法时传参数，设置方法时通过一个参数才接收，这样就能灵活的变换内容了！
<!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!'
},
methods: {
greeting: function(time) {
return 'Good ' + time + '!';
}
}
})
</script>
</body>
</html>
如果要在当前对象中拿data的属性，直接使用Vue实例化的对象.name就可以了，调用方法时也是直接拿对应的方法
<!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>
运行结果
采用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>
语法糖：v-on:click可以简写为@click
关注/取消关注练习
<!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>
年龄的增减练习
单击“长一岁”可以使得age的值加1，双击“减五岁”可以使得age的值减5
<!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>
网友评论