效果图:


使用技术:v-for v-bind v-on实现简单的列表选中绑定操作

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<style>
.green {
background: greenyellow;
border-radius: 5px;
} .pink {
background: deeppink;
border-radius: 5px;
} #box {
border-radius: 5px;
font-family: 黑体;
width: 300px;
height: 400px;
background: cadetblue;
} .item {
text-align: center;
width: 240px;
height: 40px;
margin-top: 10px;
line-height: 40px;
}
</style>
</head>
<body>
<div id="box" align="center">
<h1 style="padding-top: 20px;">Services</h1>
<div class="item s1" v-for="(item,index) in cart" v-on:click="ok(index)" v-bind:class="{pink:!item.bol, green:item.bol}">
<p>{{ item.name }} ------ {{ item.price }}--{{ item.bol }}</p>
</div>
<hr>
<p style="float: left;margin-left: 50px;">Total:</p>
<p style="float: right;margin-right: 50px;">{{ total }}</p>
</div>
</body>
</html> <script>
var vm = new Vue({
el: '#box',
data: {
cart: [{
name: 'Computer',
price: 5000,
bol: false
},
{
name: 'Keybord',
price: 200,
bol: false
},
{
name: 'Mouse',
price: 20,
bol: false
},
{
name: 'Disk',
price: 2000,
bol: false
},
],
total: 0
},
methods: {
ok: function(index) {
this.cart[index].bol = !this.cart[index].bol
this.total = 0
for (var i = 0; i < this.cart.length; i++) {
if (this.cart[i].bol)
this.total += this.cart[i].price
}
}
}
})
</script>

Vue实现简单的列表金额计算效果(简易购物车)的更多相关文章

  1. vue.js之生命周期,防止闪烁,计算属性的使用,vue实例简单方法和循环重复数据

    摘要:今天是比较糟糕的一天没怎么学习,原因是学校的wifi连不上了~~.今天学习一下vue的生命周期,如何防止闪烁(也就是用户看得到花括号),计算属性的使用,vue实例简单方法,以及当有重复数据时如何 ...

  2. Vue的简单入门

    Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...

  3. 98、vue.js简单入门

    本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...

  4. Vue.js-05:第五章 - 计算属性与监听器

    一.前言 在 Vue 中,我们可以很方便的将数据使用插值表达式( Mustache 语法)的方式渲染到页面元素中,但是插值表达式的设计初衷是用于简单运算,即我们不应该对差值做过多的操作.当我们需要对差 ...

  5. 13、vue.js简单入门

    本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...

  6. 沉淀,再出发:VUE的简单理解

    沉淀,再出发:VUE的简单理解 一.前言 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过 ...

  7. 3-5 编程练习:jQuery实现简单的图片对应展示效果

    3-5 编程练习:jQuery实现简单的图片对应展示效果 通过这个章节的学习, 老师带领大家完成了一个基本的图片切换特效,接下来,我们也实现一个类似的效果,点击相应的按钮,切换对应的图片. 效果图 : ...

  8. VUE实现简单的全选/全不选

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. vue超简单加载字体方法,解决scss难加载字体的问题

    vue超简单加载字体方法,解决scss难加载字体的问题 scss在加载字体方面一直不太好用,需要繁杂的配置才能达到想要的效果,这里说一种非常简单的方法 在App.vue的style标签下引入字体文件后 ...

随机推荐

  1. 集合系列 List(四):LinkedList

    LinkedList 是链表的经典实现,其底层采用链表节点的方式实现. public class LinkedList<E> extends AbstractSequentialList& ...

  2. opencv加载图片imread失败的原因

    用简单的imshow函数加载图片,报加载失败的异常,显示没有将图片加载到内存中.原因是在配置环境是同时将*lib与*d.lib都入了附加依赖项,而项目的生成方式选择的是debug,*lib在*d.li ...

  3. Windows10安装ubuntu16.04双系统教程

    写在前面:本教程为windows10安装ubuntu16.04(64位)双系统教程,是我多次安装双系统的经验总结,安装方法同样适用于ubuntu18.04(64位).为了直观和易于理解,我会尽量图文并 ...

  4. Java 创建线程的3种方法及各自优势

    1. 继承 Thread 类,然后调用 start 方法. class MyThread extends Thread { //重写run方法,线程运行后,跑的就是run方法 public void ...

  5. 【AGC035F】Two Histograms

    Problem Description 你有一个 \(N\) 行.\(M\) 列的.每个格子都填写着 0 的表格.你进行了下面的操作: 对于每一行 \(i\) ,选定自然数 \(r_i\) (\(0\ ...

  6. spark log4j 日志配置

    现在我们介绍spark (streaming) job独立配置的log4j的方法,通过查看官方文档,要为应用主程序(即driver端)或执行程序使(即executor端)自定义log4j配置,需要两步 ...

  7. JS 错误

    JS 错误 try 语句测试代码块的错误. catch 语句处理错误. throw 语句创建自定义错误. 错误一定会发生 当 JavaScript 引擎执行 JavaScript 代码时,会发生各种错 ...

  8. 编译原理之不懂就问-First集

    老师PPT: 这条语言实在是..通俗易懂

  9. Scrapy安装和简单使用

    模块安装 Windows 安装scrapy 需要安装依赖环境twisted,twisted又需要安装C++的依赖环境 pip install scrapy  时 如果出现twisted错误 在http ...

  10. go语言设计模式之observer

    observer.go package observer import ( "fmt" ) type Observer interface { Notify(string) } t ...