关于vue的小实例
学习网址：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的小实例的更多相关文章
- VueX（vue状态管理）简单小实例
VueX:状态管理 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 核心模块:State. ...
- Vue + WebApi 小项目：构造自己的在线 Markdown 笔记本应用
Vue + WebApi 小项目:构造自己的在线 Markdown 笔记本应用 目录 概要 知识点 完整示例图 代码与资源文件 流程步骤 概要 基于 MVP 最小可行性产品设计理念,我们先完成一个可以 ...
- Vue之小入门
Vue之小入门 <div id="app">{{ greeting }}</div> <script> let oDiv = document. ...
- winform 异步读取数据 小实例
这几天对突然对委托事件,异步编程产生了兴趣,大量阅读前辈们的代码后自己总结了一下. 主要是实现 DataTable的导入导出,当然可以模拟从数据库读取大量数据,这可能需要一定的时间,然后 再把数据导入 ...
- CSS应用内容补充及小实例
一.clear 清除浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- Objective-C之代理设计模式小实例
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- Objective-C之@类别小实例
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- OC小实例关于init方法不小心的错误
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- canva实践小实例 —— 马赛克效果
前面给大家带来了操作像素的API,此时此刻,我觉得应该配以小实例来进行进一步的说明和演示,以便给大家带来更宽广的视野和灵感,你们看了我的那么多的文章,应该是懂我的风格,废话不多说,进入正题: 这次给大 ...
随机推荐
- 当页面上需要的字段不在model中时候,需要自行设置该字段
当页面上需要的字段不在model中时候,需要自行设置该字段
- hdu-1058（map)
题意:输出第n个能拆分成由,2,3,5,7中的一个或者多个组成的数: 解题思路:a[i+1]=a[i]*2;a[i+2]=a[i]*3;a[i+3]=a[i]*5;a[i+4]=a[i]*7;然后把重 ...
- Nginx 负载均衡一致性算法
一般Hash负载算法都是%算法 比如key-5 如果有5台服务器 那么5%5=0 那么请求将落在server 0 上,当有服务器宕机或者添加新服务器时,hash算法会引发大量路由更改,可能导致缓存大 ...
- python生成器中yield和send分析
生成器 在python中生成器是指用代码实现迭代器的的功能本质还是迭代器,只不过是代码实现迭代器功能.在python中生成器是由函数实现的,通常我们在函数中加入yeild就可以实现生成器. 生成器中y ...
- Spring 使用介绍（十三）—— Bean的生命周期
一.概述 Spring Bean的完整生命周期从创建Spring容器开始,直到最终Spring容器销毁Bean,生命周期时序图如下: 二.生命周期接口分类 Bean的生命周期经历了多个接口方法的调用, ...
- Hat’s Words HDU - 1247 字典树
题意:给出数个单词 输出单词 如果该单词 是由字典中的单词组成的 思路:字典树 先把全部建树 然后对于每一个单词进行分割,分别拿两半到字典树里面去找 小心RE! #include<bits/s ...
- 大学java教案之MySQL安装图解
一.MYSQL的安装 1.打开下载的mysql安装文件mysql-5.0.27-win32.zip,双击解压缩,运行"setup.exe". 2.选择安装类型,有"Typ ...
- 洛谷P4281 紧急集合 / 聚会
LCA 题目要求找离三个点最近的点,我们先看两个点的情况,自然是找LCA,那么三个点的时候是否与LCA有关呢? 显然,离三个点最近的点一定是在这三个点联通的简单路径上. 可以简单证明一下,假设某个点离 ...
- JPQL的关联查询
一般情况下,直接使用mysql语句写关联语句,是join on 的形式,如下: select * from tablea as a left join tableb as b on b.tablea_ ...
- 【luogu3733】【HAOI2017】 八纵八横 （线段树分治+线性基）
Descroption 原题链接 给你一个\(n\)个点的图,有重边有自环保证连通,最开始有\(m\)条固定的边,要求你支持加边删边改边(均不涉及最初的\(m\)条边),每一次操作都求出图中经过\(1 ...