<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. 进程无法连接到 Subscriber"XXXXXXX"

    进程无法连接到 Subscriber“APP07”. 在订阅的机器上config 添加别名 APP07

  2. 使用opencv自带Tracker进行目标跟踪——重新设定跟踪目标

    当希望重新设定一个目标进行跟踪的时候,以下两种做法都是无效的: 1.将新对象的Rect2d直接传递给update()函数: 2.再次使用tracker的init()函数. 解决办法:重新创建一个Tra ...

  3. Math, Date，JSON对象

    Math 对象 Math是 JavaScript 的原生对象,提供各种数学功能.该对象不是构造函数,不能生成实例,所有的属性和方法都必须在Math对象上调用. 静态属性 Math对象的静态属性,提供以 ...

  4. python 的eval函数

    python中的eval()函数是用来计算所有数学的代数计算式,这样可以很快得到复杂代数式的结果. 例如:383660347*375705824-1796136991-1726898699*18994 ...

  5. laravel打印查询sql

    方法一(此方法支持 select 语句,insert,delect,update不支持) : $sql = DB::table('my_table')->select()->tosql() ...

  6. Git常用命令简记

    创建仓库 添加需要版本控制的文件到仓库中 提交到版本库 修改位于顶端的commit的日志 分支管理 版本回退 切换与合并分支 本地版本库与远程关联 克隆 Tag的使用 问题与解决 创建git仓库 gi ...

  7. Java实现的上传并压缩图片功能【可等比例压缩或原尺寸压缩】

    本文实例讲述了Java实现的上传并压缩图片功能.分享给大家供大家参考,具体如下: 先看效果: 原图:1.33M 处理后:27.4kb 关键代码: package codeGenerate.util; ...

  8. C 库函数 - sprintf()

    C 库函数 - sprintf() C 标准库 - <stdio.h> 描述 C 库函数 int sprintf(char *str, const char *format, ...) 发 ...

  9. CSS-使用CSS样式的方式

    1.HTML<!DOCTYPE>声明标签 (1)定义和用法 <!DOCTYPE>声明必须是HTML文档的第一行,位于<html>标签之前. <!DOCTYPE ...

  10. Learn from Niu 2020.1.28

    1. 泛读和精度的区别和迭代: 泛读: 1个月之内,读50篇论文,进行粗读,了解多维时间序列信号,有哪些research problem, challenges, research groups, r ...