这篇博客主要介绍了Vue的实战练习，包括两个部分。练习1中，通过Vue指令实现了一个点击按钮使div背景颜色切换的效果，利用对象方法和数组的不同操作方式展示了实现思路。在练习2中，创建了一个商品列表，点击商品可以改变其背景色并累加价格，通过遍历数组和定义对象属性来控制每个商品的状态和计算总价。
刚学完vue的几个指令，现在做个练习
练习1
如图，要做这样一个效果，当点击按钮的时候，div就变红，再点一下，红色消失
第一步、让div上来就是红色
<div id="app">
<button>click</button>
<div id="div1" :class="{red:isRed}"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
isRed: true,
}
});
</script>然后给按钮绑定点击事件,当点击按钮的时候，让红色消失
<div id="app">
<button @click="fn()">click</button>
<div id="div1" :class="{red:isRed}"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
isRed: true,
},
methods:{
fn:function(){
this.isRed = false;// this指的是vm
}
}
});
</script>好，现在红色消失了，再点按钮，应该让红色再回来吧，像这种两种状态切换的，取非的方法最方便
<div id="app">
<button @click="fn()">click</button>
<div id="div1" :class="{red:isRed}"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
isRed: true,
},
methods:{
fn:function(){
this.isRed = !this.isRed;
}
}
});
</script>上面添加class样式是使用对象方法做的，如果用数组的话就比较麻烦，代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习
最低0.47元/天 解锁文章
扫一扫
6170
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
