<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. 安装canvas

    本方法仅适用用于window系统 安装canvas需要当前工作环境拥有python环境,且只能适用python2.7版本,v3.x.x版本会造成系统报错 1.在管理员权限下 使用choco insta ...

  2. phyon tensorflow 安装（centos）

    1.phyon27 安装 1.1 下载 wget https://www.python.org/ftp/python/2.7.14/Python-2.7.14.tgz 1.2  解压 tar -zxv ...

  3. PHP OOP

    <?php //1. Class and object /* object-oriented concept an object can be almost any items or conce ...

  4. MySQL 8 mysql system schema

    在大的分类上:mysql schema包括存储数据库对象元数据的数据字典表和用于其他操作目的的系统表 数据字典表和系统表一般使用InnoDB存储引擎 与之前的版本不同,数据字典表和系统表存储在数据目录 ...

  5. sublime修改快捷键样式

    样式----------------{ "always_show_minimap_viewport": true, "auto_find_in_selection&quo ...

  6. python中的__dict__和dir()的区别

    Python下一切皆对象,每个对象都有多个属性(attribute),Python对属性有一套统一的管理方案. __dict__与dir()的区别: dir()是一个函数,返回的是list: __di ...

  7. easyui datagrid设置排序

    sortable="true" order="desc" 或者 sortable:true,order:'desc'

  8. go append 函数常见操作

    1. 将切片 b 的元素追加到切片 a 之后: a = append(a, b...) 2. 复制切片 a 的元素到新的切片 b 上: 1. b = make([]T, len(a)) 2. copy ...

  9. python里的复数complex

    复数是一个数学概念,包含了实部和虚部.在python设计语言中,可以直接定义以j为单位,也可以使用complex函数创建复数,这个函数可以传实部和虚部,也可以只传实部. 我们把形如z=a+bj(a,b ...

  10. npm vs yarn

    npm yarn npm install yarn npm install react --save yarn add react npm uninstall react --save yarn re ...