学习网址：http://www.runoob.com/vue2/vue-tutorial.html

下面是我在上面学着写的两个小例子，

1.

实现点击全选，下面的均被选中，再点击一下，下面的均取消选择；

当下面的均被选择的时候，全选被选中，值为true

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="../vue.min.js"></script>

</head>

<body>

  <div id="app">

    <form>

      <p>

        全选

      </p>

      <input type="checkbox" id="all" v-model="allSelect" @click="AllSelcet()">

      <label for="all">

        {{ allSelect }}

      </label>

      <p>

        很多个复选框

      </p>

      <input type="checkbox" id="apple" value="苹果" v-model="selects">

      <label for="apple">

        苹果

      </label>

      <input type="checkbox" id="banana" value="香蕉" v-model="selects">

      <label for="banana">

        香蕉

      </label>

      <input type="checkbox" id="orange" value="橘子" v-model="selects">

      <label for="orange">

        橘子

      </label>

      <p>

        {{ selects }}

      </p>

    </form>

  </div>

  <script type="text/javascript">

    new Vue({

      el : '#app',

      data : {

        allSelect : false,

        selects : [],

        selectsAll : ['苹果','香蕉','橘子']

      },

      methods : {

        AllSelcet : function(){

          if(this.allSelect){

            this.selects = this.selectsAll;

          }

          else{

            this.selects = [];

          }

        }

      },

      watch : {

        'selects' : function(){

          if(this.selects.length == this.selectsAll.length){

            this.allSelect = true;

          }

          else{

            this.allSelect = false;

          }

        }

      }

    })

  </script>

</body>

</html>

在代码中，使用了监听属性watch，通过监听selects数组中的长度变化，来操作allSelect的值。

2.

实现点击‘-’/‘+’，商品数量减少或者增加，相应的价格也会变化。即实现价格监听数量的变化

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="../vue.min.js"></script>

  <style rel="stylesheet">

    table{

      width: 600px;

      height: 200px;

      margin: 0 auto;

      border: 1px solid darkgray;

    }

    table tr td{

      width: 20%;

      text-align: center;

    }

    h2{

      position: relative;

      left: 420px;

    }

  </style>

</head>

<body>

  <div id="app">

    <table>

      <tr>

        <th>商品序号</th>

        <th>商品型号</th>

        <th>商品价格</th>

        <th>商品数量</th>

        <th>清空</th>

      </tr>

      <tr v-for="shop in shops">

        <td>{{ shop.id }}</td>

        <td>{{ shop.size }}</td>

        <td>{{ shop.price }}</td>

        <td>

          <button @click="shop.count-=1" v-bind:disabled="shop.count == 0">-</button>

          {{ shop.count }}

          <button @click="shop.count+=1">+</button>

        </td>

        <td>

          <button @click="shop.count=0">清空</button>

        </td>

      </tr>

    </table>

    <h2>${{ totalPrice() }}</h2>

  </div>

    <script type="text/javascript">

      new Vue({

        el : '#app',

        data : {

          shops : [

            {

              id : 1,

              size : "apple6",

              price : 4000,

              count : 1

            },

            {

              id : 2,

              size : "apple7",

              price : 5000,

              count : 1

            },

            {

              id : 3,

              size : "apple8",

              price : 6000,

              count : 1

            }

          ]

        },

        methods : {

          totalPrice : function(){

            var total = 0;

            for(var i = 0,len = this.shops.length;i<len;i++){

              total += this.shops[i].count*this.shops[i].price;

            }

            return total;

          }

        }

      })

    </script>

</body>

</html>

在“-”按钮中，增加disabled属性，
实现：
当count值为0时，disabled为true，即“-”按钮此时不可用，即此时不可以再减少数量，即数量不能为负值；
当count值不等于0时，disabled为false，即“-”按钮可用。
需要使用v-bind指令，因为需要使用到count值，该值在下面vue实例中创建的。（v-bind:href="article.url"）

注意：

1.数组属性length
2.v-for="shop in shops",shop只是他的别名
3.当合计价格的时候，需要使用循环对数组中的挨个进行累计。

关于vue的小实例的更多相关文章

  1. VueX（vue状态管理）简单小实例

    VueX:状态管理 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 核心模块:State. ...

  2. Vue + WebApi 小项目：构造自己的在线 Markdown 笔记本应用

    Vue + WebApi 小项目:构造自己的在线 Markdown 笔记本应用 目录 概要 知识点 完整示例图 代码与资源文件 流程步骤 概要 基于 MVP 最小可行性产品设计理念,我们先完成一个可以 ...

  3. Vue之小入门

    Vue之小入门 <div id="app">{{ greeting }}</div> <script> let oDiv = document. ...

  4. winform 异步读取数据 小实例

    这几天对突然对委托事件,异步编程产生了兴趣,大量阅读前辈们的代码后自己总结了一下. 主要是实现 DataTable的导入导出,当然可以模拟从数据库读取大量数据,这可能需要一定的时间,然后 再把数据导入 ...

  5. CSS应用内容补充及小实例

    一.clear 清除浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  6. Objective-C之代理设计模式小实例

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  7. Objective-C之@类别小实例

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  8. OC小实例关于init方法不小心的错误

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  9. canva实践小实例 —— 马赛克效果

    前面给大家带来了操作像素的API,此时此刻,我觉得应该配以小实例来进行进一步的说明和演示,以便给大家带来更宽广的视野和灵感,你们看了我的那么多的文章,应该是懂我的风格,废话不多说,进入正题: 这次给大 ...

随机推荐

  1. codeforces545C

    Woodcutters CodeForces - 545C Little Susie listens to fairy tales before bed every day. Today's fair ...

  2. hdu 5652(并查集）

    题意:很久之前,在中国和印度之间有通路,通路可以简化为一个n*m的字符串,0表示能通过,1表示障碍,每过一年就有一个坐标变成1,问你什么时候,通路彻底无法通过: 解题思路:无向图的连通性,一般直接搜索 ...

  3. 三星Galaxy S10可望率先应用于1TB的手机内存

    导读 三星电子(Samsung Electronics)1月30日宣布,已经开始量产业界首款容量高达1TB的嵌入式通用闪存存储器(embedded Universal Flash Storage,eU ...

  4. .net core 2.0 MVC区域

    区域 创建对应的目录结构 Areas System Controllers Views 在Startup.cs 注册路由 在控制器上方加上`[Area("system")]` // ...

  5. EasyUI-datebox设置开始日期小于结束日期，并且结束日期小于当前日期

    datebox设置开始日期小于结束日期,并且结束日期小于当前日期 //日期控制扩展选择日期小于等于当前日期,开始日期小于等于结束日期 $("#datebox1").datebox( ...

  6. Spring Boot2.0自定义配置文件使用

    声明: spring boot 1.5 以后,ConfigurationProperties取消locations属性,因此采用PropertySource注解配合使用 根据Spring Boot2. ...

  7. 以@GetMapping为例，SpringMVC 组合注解

    @GetMapping是一个组合注解,是@RequestMapping(method = RequestMethod.GET)的缩写.该注解将HTTP Get 映射到 特定的处理方法上.

  8. HUST 1555 数学作业

    参考自:https://www.cnblogs.com/ECJTUACM-873284962/p/6394892.html 1555 - A Math Homework 时间限制:1秒 内存限制:12 ...

  9. Hibernate 注解映射

    工作中遇到hibernate映射的一些问题,这里总结一下 (特别是测试时,许多数据并不能有效关联.所以@NotFound 很重要) 一,假设有2张表user,company 我们知道,一个用户属于一个 ...

  10. 洛谷P1330封锁阳光大学题解

    题意 此题可以说是一个很裸的一个二分图染色,但是比较不同的是,这个图中可能是不联通的,因此我们需要找到所有的联通块,然后一一选出每个联通块中黑块与白块中最小的个数,然后加入到最后的答案中去,也是很坑的 ...