Vue记忆结构(二): 小案例vue选择结算,点击变色

最新推荐文章于 2023-03-17 20:59:14 发布

光头和尚111

最新推荐文章于 2023-03-17 20:59:14 发布

阅读量205

点赞数

分类专栏： vue 文章标签： v-bind案例

本文链接：https://blog.csdn.net/qq_42838723/article/details/88555898

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

v-bind:class="{red:item.bool,green:!item.bool}" 用来进行颜色切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的小超市结算</title>
    <script src="js/vue.min.js" type="text/javascript"></script>
    <style type="text/css">
        .red{
            background-color: red;
        }
        .green{
            background-color: aquamarine;
        }
    </style>
</head>
<body>
	<div id="a" style="width: 400px;text-align: center;margin: 0 auto;">
		<h1>我的小超市</h1>
	    <ul style="list-style-type: none;text-align: center">
	    	<!--点击变色并且结算-->
	        <li style="line-height: 70px;" v-for='(item,index) in arr' @click='change(index)'   v-bind:class="{red:item.bool,green:!item.bool}" >{{ item.des+"------"+item.price }}</li><!--v-bind:class='{item.color}'-->
	    </ul>
	    <h2>总计:{{ total}}元</h2>
	</div>
	<script>
		var vm=new Vue({
			el:"#a",
			data:{
				arr:[
	                {des:'火腿',price:500,bool:false},
	                {des:'方便面',price:500,bool:false},
	                {des:'薯片',price:500,bool:false},
	                {des:'虾条',price:500,bool:false},
	                {des:'冰淇淋',price:500,bool:false},
	                {des:'巧克力',price:500,bool:false}
	            ],
	            total:0,
			},
	        methods:{
	            change:function (index) {
	                this.total=0;
	                this.arr[index].bool=!this.arr[index].bool;
	                for(var i=0;i<this.arr.length;i++){
	                	if (this.arr[i].bool==true) {
	                		this.total+=this.arr[i].price;
	                	}
	                }
	            }
	        }
		});
	</script>
	
</body>
</html>

光头和尚111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue记忆结构(二): 小案例vue选择结算,点击变色

v-bind:class="{red:item.bool,green:!item.bool}" 用来进行颜色切换&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;我的小超市结算&lt;/tit
复制链接

扫一扫

专栏目录