<html>

<head>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<style type="text/css">

    li.selected{

        border: 1px solid;

    }

    /*斗篷*/

    [v-cloak]{

        display: none;

    }

</style>

<body >

    <div id="app" v-cloak>

        <ul>

            <li @click="click_me(k)" v-for="(v,k) in books" :style="{color:v.color,fontSize:v.size}" class="demo" :class="{selected:v.is_selected}"> {{ v.name }}</li>

        </ul>

        <div>总价{{ total_price }}</div>

    </div>

</body>

<script type="text/javascript">

    const app = new Vue({

        el : "#app",

        data : {

            books : [

                {name:'22',price:33,size:18,color:"blue",is_selected:false},

                {name:33,price:12,size:14,color:"red",is_selected:false}

            ]

        },

        methods : {

            click_me : function (k) {

                this.books[k].is_selected = !this.books[k].is_selected;

            },

        },

        // 计算属性

        computed : {

            total_price : function(){

                var total_price = 0;

                for(var i in this.books){

                    total_price += this.books[i].price;

                }

                return total_price;

            }

        }

    })

</script>

</html>

vue基础实例的更多相关文章

  1. vue基础---实例

    (1)数据和方法 ①响应式双向绑定 当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性.当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为 ...

  2. （day65、66）Vue基础、指令、实例成员、JS函数this补充、冒泡排序

    目录 一.Vue基础 (一)什么是Vue (二)为什么学习Vue (三)如何使用Vue 二.Vue指令 (一)文本指令 (二)事件指令v-on (三)属性指令v-bind (四)表单指令v-model ...

  3. Vue基础二之全局API、实例属性和全局配置，以及组件进阶（mixins）的详细教程（案列实现，详细图解，附源码）

    本篇文章主要是写Vue.directive().Vue.use()等常用全局API的使用,vm.$props.vm.$options.vm.$slots等实例属性的使用,以及Vue全局配置.组件的mi ...

  4. Vue简单基础 + 实例 及 组件通信

    vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

  5. vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制

    前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...

  6. 前端MVC Vue2学习总结（二）——Vue的实例、生命周期与Vue脚手架（vue-cli）

    一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...

  7. vue基础学习（二）

    02-01  vue事件深入-传参.冒泡.默认事件 <div id="box"> <div @click="show2()"> < ...

  8. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  9. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期

    回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...

随机推荐

  1. 数据库中的sql完整性约束

    完整性约束 完整性约束是为了表的数据的正确性!如果数据不正确,那么一开始就不能添加到表中. 1 主键 当某一列添加了主键约束后,那么这一列的数据就不能重复出现.这样每行记录中其主键列的值就是这一行的唯 ...

  2. linux100讲——80 系统函数库介绍

    1.系统自建了函数库,可以在脚本中引用 /etc/init.d/functions 2.自建函数库 使用 source 函数脚本文件 “导入”函数 3. vim /etc/init.d/functio ...

  3. [CF1303B] National Project - 数学

    Solution \(2a>n\),一次性结束,直接输出 \(n\) \(a \geq b\),那么一直修即可,直接输出 \(n\) 否则,\(a\) 占弱势,我们考虑用 \(a\) 修一半需要 ...

  4. BZOJ2809&&LG1552 APIO2012派遣(线段树合并)

    BZOJ2809&&LG1552 APIO2012派遣(线段树合并) 题面 自己找去 HINT 简化一题面就是让你从每个点的子树中以\(<=m\)的代价选取尽可能多的点,然后乘上 ...

  5. mysql 数据库优化的几种方法

    1.选取最适用的字段属性 MySQL可以很好的支持大数据量的存取,但是一般说来,数据库中的表越小,在它上面执行的查询也就会越快.因此,在创建表的时候,为了获得更好的性能,我们可以将表中字段的宽度设得尽 ...

  6. 玩转HP DL380 G5之一：HP服务器引导盘SmartStart CD下载地址收集

    由于hp企业应用从hp拆分出去,导致很多早期服务器相关资料被hp抹去,其中受影响比较严重的就是hp DL系列服务器,下面是本人从网上搜集到的hp引导盘镜像包,这些包内含服务器必要的驱动,一般随服务器一 ...

  7. 532-数组中的K-diff数对

    532-数组中的K-diff数对 给定一个整数数组和一个整数 k, 你需要在数组里找到不同的 k-diff 数对.这里将 k-diff 数对定义为一个整数对 (i, j), 其中 i 和 j 都是数组 ...

  8. 假期学习【五】RDD编程实验四

    今天完成了实验四的第二问和第三问 第二题 对于两个输入文件 A 和 B,编写 Spark 独立应用程序,对两个文件进行合并,并剔除其 中重复的内容,得到一个新文件 C.下面是输入文件和输出文件的一个样 ...

  9. Python入门10 —— for循环

    1.字符串依次取值 students = ['egon', 'lxx', 'alex'] i = 0 while i < 3: print(students[i]) i += 1 2.针对循环取 ...

  10. MongoDB地理空间（2d）索引创建与查询

    LBS(Location Based Services)定位服务,即根据用户位置查询用户附近相关信息,这一功能在很多应用上都有所使用.基于用户位置进行查询时,需要提供用户位置的经纬度.为了提高查询速度 ...