简单的关注按钮实现
预期效果
按钮切换：点击“关注”按钮会变成“已关注”，点击“已关注”会变成关注
实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- cdn方式引入vue2 -->
<script src=" https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<title>Vite App</title>
</head>
<body>
<div id="app">
<!-- v-on：click简写成@click
isFollow是vm属性，可以直接对他操作
{{msg}}vue的插值语法，可以取到计算属性和属性的值-->
<button @click="isFollow = !isFollow">{{msg}}</button>
</div>
<script>
new Vue({
el:'#app',//与模板绑定：可以使用el也可以用mount
data() {
return {
isFollow:false
}
},
computed:{//计算属性
//不使用set方法可以简写
msg(){
return this.isFollow?'关注':'已关注'
}
}
})
</script>
</body>
</html>
总结
使用了以下知识点：
1、vue的插值语法：
使用{{}}可以取到vm中的任何值
2、vue实例对象和模板的绑定方法：使用el或者mount
3、计算属性：如果不使用set可以简写
4、事件修饰符v-on:可以简写为@
tips:
在vscode中新建一个html文件后可以输入!+tab键自动生成模板