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>

python学习第九十天:vue补习2的更多相关文章

  1. Python学习--04条件控制与循环结构

    Python学习--04条件控制与循环结构 条件控制 在Python程序中,用if语句实现条件控制. 语法格式: if <条件判断1>: <执行1> elif <条件判断 ...

  2. Python学习--01入门

    Python学习--01入门 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.和PHP一样,它是后端开发语言. 如果有C语言.PHP语言.JAVA语言等其中一种语言的基础,学习Py ...

  3. Python 学习小结

    python 学习小结 python 简明教程 1.python 文件 #!/etc/bin/python #coding=utf-8 2.main()函数 if __name__ == '__mai ...

  4. Python学习路径及练手项目合集

    Python学习路径及练手项目合集 https://zhuanlan.zhihu.com/p/23561159

  5. python学习笔记-python程序运行

    小白初学python,写下自己的一些想法.大神请忽略. 安装python编辑器,并配置环境(见http://www.cnblogs.com/lynn-li/p/5885001.html中 python ...

  6. Python学习记录day6

    title: Python学习记录day6 tags: python author: Chinge Yang date: 2016-12-03 --- Python学习记录day6 @(学习)[pyt ...

  7. Python学习记录day5

    title: Python学习记录day5 tags: python author: Chinge Yang date: 2016-11-26 --- 1.多层装饰器 多层装饰器的原理是,装饰器装饰函 ...

  8. [Python] 学习资料汇总

    Python是一种面向对象的解释性的计算机程序设计语言,也是一种功能强大且完善的通用型语言,已经有十多年的发展历史,成熟且稳定.Python 具有脚本语言中最丰富和强大的类库,足以支持绝大多数日常应用 ...

  9. Python学习之路【目录】

    本系列博文包含 Python基础.前端开发.Web框架.缓存以及队列等,希望可以给正在学习编程的童鞋提供一点帮助!!! 目录: Python学习[第一篇]python简介 Python学习[第二篇]p ...

随机推荐

  1. windows下 nginx安装 使用

    介绍 Nginx (engine x) 是一个高性能的HTTP和反向代理服务器. 反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络 ...

  2. Java的Integer常量池和String常量池

    1.Integer的常量池 看下面一段代码: package cn.qlq.test; public class ArrayTest { public static void main(String[ ...

  3. Centos 7 smb 安装使用

    安装: yum install samba 添加smb用户: smbpasswd -a root /etc/samba/smb.conf 追加: [public] path = / valid use ...

  4. 【设计模式】迭代器模式(Iterator )

    摘要: 1.本文将详细介绍迭代器模式的原理和实际代码中特别是Android系统代码中的应用. 纲要: 1. 引入迭代器模式 2. 迭代器的概念及优缺点介绍 3. 迭代器在Android源码中的应用 1 ...

  5. 设计模式之笔记--工厂方法模式(Factory Method)

    工厂方法模式(Factory Method) 定义 工厂方法模式(Factory Method),定义一个用于创建对象的接口,让子类决定实例化哪一个类.工厂方法使一个类的实例化延迟到其子类. 类图 描 ...

  6. 过渡&动画

    进入/离开&列表过渡 概述 Vue在插入,更新或者移除Dom时,提供多种不同方式的应用过渡效果.包括以下工具 在css过渡和动画中自动应用class 可以配合使用第三方css动画库,如Anim ...

  7. 初识ES6

    1.ECMAScript的官网地址:http://www.ecma-international.org/cma-262/6.0/,其是JS语言的下一代标准,已经在2015年6月正式发布,目标是让JS可 ...

  8. jquery获取元素索引值index()的例子

    如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置. 如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置.如果找不到匹配的元素,则返回-1 ...

  9. 写微信API所遇到的问题

    1.接口还没出来之前. 根据微信网页版的页面,自己做了页面,分成了两个页面,一个是登录之后的,一个是登录之前的.后来接口出来之后我师兄说要做成只有一个页面时,我就有点吓到了,想想都觉得难,后来用了JQ ...

  10. 虚拟机 VMware Workstation12 安装Ubuntu系统

    Ubuntu 系统是一款优秀的.基于GNU/Linux 的平台的桌面系统. 当然,目前为止很多应用程序还完全不能允许运行在 Ubuntu 系统上,而且 Ubuntu 的界面.使用方法会让大部分Wind ...