Vue

八、重要指令

  • v-bind
<!-- 值a -->
<div v-bind:class='"a"'></div> <!-- 变量a -->
<div v-bind:class='a'></div> <!-- 变量a, b -->
<div v-bind:class='[a, b]'></div> <!-- a为class值,isA决定a是否存在(ture | false) -->
<div v-bind:class='{a: isA}'></div> <!-- 多class值,是否存在 -->
<div v-bind:class='{a: isA, b: isB}'></div> <!-- 多style值,my_color为变量,cyan为普通值 -->
<div :style='{color:my_color, background:"cyan"}'></div>
  • v-on
<!-- 绑定函数fn1,并将事件event传递过去 -->
<div v-on:click='fn1'></div> <!-- 绑定函数fn2,并将自定义参数10传递过去 -->
<div v-on:click='fn2(10)'></div> <!-- 绑定函数fn3,并将事件event与自定义参数10传递过去 -->
<div v-on:click='fn2($event, 10)'></div>
  • v-model
<!-- 文本输入框:数据的双向绑定 -->
<input type="text" v-model='val' />
<textarea v-model='val'></textarea> <!-- 单个复选框:选中与否val默认值为true|false -->
<input type="checkbox" v-model='val' />
<!-- 通过true-value|false-value修改默认值为true|false -->
<input type="checkbox" v-model='val' true-value="选中" false-value="未选中" /> <!-- 多个复选框:val作为数组[]来使用,可以存储选中元素的value值,反之数组有对应value代表该选框选中 -->
<input type="checkbox" value="男" v-model='val' />
<input type="checkbox" value="女" v-model='val' /> <!-- 单选框:val存储选中的单选框的value值 -->
<input type="radio" value="男" v-model='val' />
<input type="radio" value="女" v-model='val' />

九、案例

  • v-show
<style type="text/css">
.btn_wrap {
width: 660px;
margin: 0 auto;
}
.btn_wrap:after {
content: '';
display: block;
clear: both;
}
.btn {
width: 200px;
height: 40px;
border-radius: 5px;
float: left;
margin: 0 10px 0;
}
.box {
width: 660px;
height: 300px;
}
.b1 {background-color: red}
.b2 {background-color: orange}
.b3 {background-color: cyan} .box_wrap {
width: 660px;
margin: 10px auto;
}
</style> <div id="app">
<div class="btn_wrap">
<div class="btn b1" @click='setTag(0)'></div>
<div class="btn b2" @click='setTag(1)'></div>
<div class="btn b3" @click='setTag(2)'></div>
</div>
<div class="box_wrap">
<div class="box b1" v-show='isShow(0)'></div>
<div class="box b2" v-show='isShow(1)'></div>
<div class="box b3" v-show='isShow(2)'></div>
</div>
</div> <script type="text/javascript">
new Vue({
el: '#app',
data: {
tag: 0
},
methods: {
isShow (index) {
return this.tag === index;
},
setTag (index) {
this.tag = index;
}
}
})
</script>
  • v-for
<div id="app">
<div>
<input type="text" v-model="inValue">
<button @click='pushAction'>提交</button>
</div>
<ul>
<li @click='deleteAction(index)' v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>
</div> <script type="text/javascript">
new Vue({
el: '#app',
data: {
inValue: '',
list: []
},
methods: {
pushAction: function () {
this.list.push(this.inValue);
this.inValue = ''
},
deleteAction: function (index) {
this.list.splice(index, 1);
}
}
})
</script>

day61的更多相关文章

  1. 雅礼集训【Day6-1】字符串

    雅礼集训[Day6-1]字符串 假设我们有串\(a\),我们设\(a'\)为\(a\)翻转后按为取反过后的串. 我们只考虑前一半的,长为\(m\)的串.如果前半截匹配了\(a\)或者\(a'\),则\ ...

  2. day61——多表操作(增、删除、改、基于对象的跨表查询)

    day61 增删改查 增加 # 增加 # 一对一 # au_obj = models.AuthorDetail.objects.get(id=4) models.Author.objects.crea ...

  3. python 全栈开发,Day61(库的操作,表的操作,数据类型,数据类型(2),完整性约束)

    昨日内容回顾 一.回顾 定义:mysql就是一个基于socket编写的C / S架构的软件 包含: ---服务端软件 - socket服务端 - 本地文件操作 - 解析指令(mysql语句) ---客 ...

  4. 原来这是一个经典面试题-------Day61

    前几天在table的操作中,记录了动态生成表格的三种方式: 1.html语言的拼接:用字符串或者数组拼接在html语言中,这个理解起来最直观 2.插入行和列:insertRow()和insertCel ...

  5. Pyhton学习——Day61

    class Pagination(object): def __init__(self,totalCount,currentPage,perPageItemNum=10,maxPageNum=7): ...

  6. day61 django入门(2)

    目录 一.数据的查.改.删 1 查 2 改 3 删 二.django orm中如何创建表关系 三.django请求生命周期流程图 四.路由层 1 无名分组 2 有名分组 3 两种分组不能混用,单个可以 ...

  7. day61:Linux:权限管理&rpm软件包管理&yum工具

    目录 1.权限管理 2.rpm软件包管理 3.yum工具(联网) 权限管理 1.什么是权限? 权限主要用来约束用户能对系统所做的操作 2.为什么要使用权限? 因为系统中不可能只存在一个root用户,一 ...

  8. day61 Pyhton 框架Django 04

    内容回顾 1.django处理请求的流程: 1. 在浏览器的地址栏输入地址,回车发get请求: 2. wsgi模块接收请求: 3. 在urls.py文件中匹配地址,找到对应的函数: 4. 执行函数,返 ...

  9. 初识Djiango

    老师的博客:点我 内容主要是看老师的博客 下面是自己的写的某些自己当时不太懂的. 关于Django的版本的问题 Django官网下载页面 在官网上显示lts的是表示支持长期版本.所以最好下载1.11版 ...

随机推荐

  1. Maven 那些破事

    deploy 只上传了pom 晚上输命令,打算打包上传到本地库里,然后去服务器上部署新版本 mvn clean package deploy 结果看着mvn的build过程只是上传了pom,去库服务器 ...

  2. 地区picker 各选择器,优劣分析

    移动端选择器picker有很多,各大ui组件都有自己的picker,比如light7,HUI,MUI,jqueryUI等等.但是,我发现他们都有各种各样的问题.这次的地区选择,需要地区的省份+市+经纬 ...

  3. mysql 添加用户

    CREATE USER 'user_name'@'%' IDENTIFIED BY '12345';      -- %  代表所有ip可以访问 GRANT all ON *.* TO 'user_n ...

  4. 尝试笔记 01 之 CSS 边角上的标签

    作者: 八月未见 博客: https://www.cnblogs.com/jmtm/ 以下内容我仅尝试了Firefox浏览器,其他浏览器效果未知. 尝试做一个 CSS 写的角标,因为不能把它移到角落去 ...

  5. 【读书笔记】iOS-关闭键盘的2种方法

    一种是通过使用键盘上的return键关闭键盘,一种是通过触摸背景关闭键盘. 参考资料:<iOS7开发快速入门>

  6. Android系统执行Java jar程序 -- dalvik运行dex Java工程

    本文仅针对纯java工程执行进行诠释,一般在PC平台作为jar包形式存在,在Android平台则以dex包形式存在. Java属于高级程序语言,Java程序需要运行在特定的虚拟机中,虚拟机将Java字 ...

  7. 【three.js练习程序】鼠标滚轮缩放

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. 【three.js练习程序】随机生成100个方块

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. APP性能测试指标和测试方法

    流量 常用方法 方法一:Android系统自带统计功能(总体流量数值) Proc/uid_stat/{UID}/tcp_snd和tcp_rcv UID是每个app安装时候分配的唯一编号用于识别该app ...

  10. 根据IP查找计算机名

    查找10.10.10.X段的计算机名称 $r="10.10.10." $s=1..254 foreach ($a in $s) { $ip = $r + [string]$a $i ...