<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. 吴裕雄--天生自然HADOOP操作实验学习笔记：tf-idf算法

    实验目的 通过实验了解tf-idf算法原理 通过实验了解mapreduce的更多组件 学会自定义分区,读写缓存文件 了解mapreduce程序的设计方法 实验原理 1.TF-IDF简介 TF-IDF( ...

  2. Patter discovery VS clustering

    “pattern driven” (PD) is based on enumerating candidate patterns in a given solution space and picki ...

  3. Uva12034 （组合数取模）

    题意:两匹马比赛有三种比赛结果,n匹马比赛的所有可能结果总数 解法: 设答案是f[n],则假设第一名有i个人,有C(n,i)种可能,接下来还有f(n-i)种可能性,因此答案为 ΣC(n,i)f(n-i ...

  4. WSL Ubuntu 安装MongoDb 4.0导入公钥时遇到一个坑 (转)

    WSL Ubuntu 安装MongoDb 4.0导入公钥时遇到一个坑 一路坑啊~~~网上的密钥都不对????  不应该啊 源中默认是MongoDb 3.x 但是我想用4.0,然后按照mongodb官方 ...

  5. 杜教筛BM

    #include <cstdio> #include <cstring> #include <cmath> #include <algorithm> # ...

  6. Leetcode Week5 Maximum Sum Circular Subarray

    Question Given a circular array C of integers represented by A, find the maximum possible sum of a n ...

  7. git在idea中使用

    (1)创建README.md文件 fengli@DESKTOP-FEQ1N4I MINGW32 /f/workspace/imallproject (master)$ touch README.md ...

  8. C++中c_str()的用法

    这个函数经常用到,总是记不住,记下来,方便翻阅 c_str()函数返回一个指向正规C字符串的指针,内容与string串相同. C++中c_str()主要用法就是为了与C语言兼容,在C语言中没有stri ...

  9. 中文 json_encode之后字符长度问题

    问题描述: 将某个字符串$str 进行json编码,即json_encode($str)后变成Unicode字符存入数据库,会发现中文的长度明明没有超过设置的字符长度最大值,但是却抛出字段长度过长错误 ...

  10. 【转】IEnumerable接口的一个简单示例

    转:https://blog.csdn.net/wang371756299/article/details/8197075 摘要: IEnumerable接口是实现foreach循环的一个重要的接口, ...