<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. mysql 表分区操作

    //不支持动态创建分区CREATE TABLE `rpt_exp_event_bucket_creative_d_across` ( `bucket_id` VARCHAR(200) NOT NULL ...

  2. Linux——基础之vi编辑器，编辑器之神！

    VI编辑器是什么? 我们学了怎么多的命令,都是为了我们的linux系统和远程操作的方便,那么我们现在怎么,编辑服务器上的文件和软件呢? 换句话说,就是我们如何通过命令行去完成文本和代码的编写,和系统的 ...

  3. Gitee Git bash VSCode操作简易说明

    GIT Git是一个分布式的版本控制系统,只是软件,需要你下载装到电脑上,实现git功能. Github.Gitee基于git的项目托管平台.Github是国外的,连接速度因人而异:另外Github收 ...

  4. pandas模块的数据操作

    数据操作 数据操作最重要的一步也是第一步就是收集数据,而收集数据的方式有很多种,第一种就是我们已经将数据下载到了本地,在本地通过文件进行访问,第二种就是需要到网站的API处获取数据或者网页上爬取数据, ...

  5. 最新Idea激活码，持续更新

    更新时间2020-01-10,亲测可用. 激活码老是失效,太麻烦,选择永久激活的方法,此方法,只针对Idea2019.2.1以及之前版本的. 附上链接: https://www.cnblogs.com ...

  6. html5的页面在IOS中，按钮 变成圆角怎么办？

      在button的css 中添加: -webkit-appearance: none;     border: none;     border-radius: 0; ok 的啦   文章来源:刘俊 ...

  7. js异步执行 按需加载 三种方式

    js异步执行 按需加载 三种方式 第一种:函数引用 将所需加载方法放在匿名函数中传入 //第一种 函数引用 function loadScript(url,callback){ //创建一个js va ...

  8. 【Unity|C#】基础篇(13)——特性（Attribute）

    [学习资料] <C#图解教程>(第24章):https://www.cnblogs.com/moonache/p/7687551.html 电子书下载:https://pan.baidu. ...

  9. 845. 八数码（bfs+map）

    在一个3×3的网格中,1~8这8个数字和一个“X”恰好不重不漏地分布在这3×3的网格中. 例如: 1 2 3 X 4 6 7 5 8 在游戏过程中,可以把“X”与其上.下.左.右四个方向之一的数字交换 ...

  10. 曼孚科技：数据标注，AI背后的百亿市场

    ​ 1. 两年前,来自山东农村的王磊成为了一位数据标注员.彼时的他,工作内容非常简单且枯燥:识别图片中人的性别. 然而,一段时间之后,他注意到分配给他的任务开始变得越来越复杂:从识别性别到年龄,从框选 ...