Vue v-if v-for v-bind v-on
v-if
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
v-for
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{message: 'Foo' },
{message: 'Bar' }
]
}
})
v-bind
<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
<!-- with inline string concatenation -->
<img :src="'/path/to/images/' + fileName">
v-on
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
案例整合
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<meta content="telephone=no" name="format-detection" />
<title>关注的人</title>
<link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
<link href="../css/qsc-user.css" rel="stylesheet" type="text/css">
<link href="../css/ddd-dialog.css" rel="stylesheet" type="text/css">
<style type="text/css">
.cont {
margin-top: 5em!important;
}
.tu img {
display: block;
width: 50%;
margin: 10px auto;
}
body {
background-color: #fff;
font-family: "微软雅黑";
}
.aui-bar-nav {
background: #00d8c9;
}
.color_organ{
color: #ff901a;
}
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<header class="aui-bar aui-bar-nav">
<a class="aui-pull-left aui-btn ">
<span class="aui-iconfont aui-icon-left"></span>
</a>
<div class="aui-title">关注的人</div>
</header>
<div id="content" class="aui-content aui-margin-b-15" v-cloak>
<div v-if="Items.length == 0">
<div class="cont">
<div class="tu">
<img src="../image/nodata5.png">
</div>
</div>
</div>
<div v-else>
<ul class="aui-list aui-media-list">
<li class="aui-list-item aui-list-item-middle" v-for="Item in Items">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width: 3rem;">
<img v-bind:src="Item.Avatar" class="aui-img-round aui-list-img-sm">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title aui-font-size-14" v-cloak>{{Item.Nickname}}
</div>
</div>
<div class="aui-list-item-text">
我直播，我快乐
</div>
</div>
<div class="aui-list-item-right aui-margin-r-15">
<input type="checkbox" class="aui-radio" checked v-on:click="follow(Item.RongCustomerId,$event)">
</div>
</div>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/jquery.min.js"></script>
<script>
var user;
apiready = function () {
user = $api.getStorage('user');
fix_status_bar();
// 获取账户数据
api.ajax({
url : BASE_URL_ACTION + '/RongCloud/GetSubscriptionList',
method : 'post',
data : {
values : {
rongCustomerId : user.person_id,
subscribe: 0,
pageIndex:0,
pageSize:20
}
}
},function(json, err) {
var header_vm = new Vue({
el: '#content',
data: json,
methods:{
follow:function (RongCustomerId,e) {
var target = e.currentTarget;
if ($(target).is(":checked")) {// 关注
follow(RongCustomerId,user.person_id,1);
} else { // 取消关注
follow(RongCustomerId,user.person_id,0);
}
// 发送页面刷新事件
api.sendEvent({
name: 'diamond_reload',
extra: {
}
});
}
}
})
});
}
// 关注主播
function follow(roomId,rongCustomerId,subscribe) { // subscribe 1关注 0取消关注
api.ajax({
url : BASE_URL_ACTION + '/RongCloud/ChatRoomSubscribe',
method : 'post',
data : {
values : {
roomId:roomId, // 主播的融云id
rongCustomerId : rongCustomerId,
subscribe:subscribe
}
}
}, function(json, err) {
});
}
</script>
</body>
</html>
Vue v-if v-for v-bind v-on的更多相关文章
- SIP模块版本错误问题：the sip module implements API v??? but XXX module requires API v???
系统安装了python 2.7,继续安装PyQt4,于是依次下载sip.pyqt4源码进行安装.用以下代码测试: import PyQt4.QtGui 显示出错.错误信息:the sip module ...
- n维向量空间W中有子空间U,V,如果dim(U)=r dim(V)=n-r U交V !={0},那么U,V的任意2组基向量的组合必定线性相关
如题取U交V中的向量p (p!=0), 那么p可以由 U中的某一组基线性组合成(系数不全是零),同时,-p也可以由V中的某一组基线性组合成(系数不全为零) 考察p+(-p)=0 可知道,U中的这组基跟 ...
- vue中使用elementUI中表格的v宽度，字体大小
<el-table :row-style="{height:'20px'}" :cell-style="{padding:'0px'}" style=&q ...
- XV Open Cup named after E.V. Pankratiev. GP of Tatarstan
A. Survival Route 留坑. B. Dispersed parentheses $f[i][j][k]$表示长度为$i$,未匹配的左括号数为$j$,最多的未匹配左括号数为$k$的方案数. ...
- XVII Open Cup named after E.V. Pankratiev. GP of SPb
A. Array Factory 将下标按前缀和排序,然后双指针,维护最大的右边界即可. #include<cstdio> #include<algorithm> using ...
- XVI Open Cup named after E.V. Pankratiev. GP of Ukraine
A. Associated Vertices 首先求出SCC然后缩点,第一次求出每个点能到的点集,第二次收集这些点集即可,用bitset加速,时间复杂度$O(\frac{nm}{64})$. #inc ...
- XVI Open Cup named after E.V. Pankratiev. GP of Peterhof
A. (a, b)-Tower 当指数大于模数的时候用欧拉定理递归计算,否则直接暴力计算. #include<cstdio> #include<algorithm> #incl ...
- XVI Open Cup named after E.V. Pankratiev. GP of Siberia
A. Passage 枚举两个点,看看删掉之后剩下的图是否是二分图. #include <bits/stdc++.h> using namespace std ; const int MA ...
- XVI Open Cup named after E.V. Pankratiev. GP of Ekaterinburg
A. Avengers, The 留坑. B. Black Widow 将所有数的所有约数插入set,然后求mex. #include<bits/stdc++.h> using names ...
- XVI Open Cup named after E.V. Pankratiev. GP of Eurasia
A. Nanoassembly 首先用叉积判断是否在指定向量右侧,然后解出法线与给定直线的交点,再关于交点对称即可. #include<bits/stdc++.h> using names ...
随机推荐
- Metasploit的攻击实例讲解----ms10_046快捷方式图标漏洞
不多说,直接上干货! 准备工具 1.Kali linux 2016.2(Rolling)系统 IP: 192.168.1.103 2.受害者机子(windows XP系统) IP: 10.10 ...
- java操作文件的创建、删除、遍历
java操作文件的创建.删除.遍历: package test; import java.io.File; import java.io.IOException; import java.util.A ...
- 外部样式表声明的样式并不会进入style对象
在网页设计当中,我们注重网页的行为(js).结构(HTLM).样式(css)分离开 内联样式表或者内部样式表声明的样式信息都会进入style对象. 我们可以测试一下: 但是我们的外部样式表,也就是通过 ...
- iOS菜鸟成长笔记（3）——斯坦福公开课学习（1）
一.iOS四层结构 1.Core OS 是用FreeBSD和Mach所改写的Darwin, 是开源.符合POSIX标准的一个Unix核心.这一层包含或者说是提供了整个iPhone OS的一些基础功能, ...
- hp服务器安装exsi5.5
启动按f8进入raid制造页面: 1. 插入exsi5.5光盘 2. 按下开机键(开机比较慢需要等待一段时间) 3. 进入启动项目界面(插入光盘后启动会让你选择启动项.选择1光盘启动) 接下来按 ...
- 阿里云slb上传证书错误
阿里云上传证书错误 今天在阿里云给slb上传新买的证书,传的过程中报错了,如下: 网上找了半天没找到,鼠标放在错误哪行行首,会报一个错 大意就是一行最多64个字符,我检查了下,报错这行是68个字符,于 ...
- ES6学习笔记（十五）Generator函数的异步应用
1.传统方法 ES6 诞生以前,异步编程的方法,大概有下面四种. 回调函数 事件监听 发布/订阅 Promise 对象 Generator 函数将 JavaScript 异步编程带入了一个全新的阶段. ...
- CF546E Soldier and Traveling（网络流，最大流）
CF546E Soldier and Traveling 题目描述 In the country there are \(n\) cities and \(m\) bidirectional road ...
- 题解 UVA10328 【Coin Toss】
这道题目其实就是说有N张纸牌,问至少连续K张正面朝上的可能性是多少. 可以用递推做.首先我们将题目所求从 至少K张 转化为 总数 - 至多K张 (为什么要这样自己想) 设F[i][j]为前i个纸牌至多 ...
- 洛谷 P1583 魔法照片
P1583 魔法照片 题目描述 一共有n(n≤20000)个人(以1--n编号)向佳佳要照片,而佳佳只能把照片给其中的k个人.佳佳按照与他们的关系好坏的程度给每个人赋予了一个初始权值W[i].然后将初 ...