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. Quartz的Properties文件解析

    将可变信息放在properties文件是使配置更加灵活. 1.文档位置和加载顺序 1. StdSchedulerFactory默认加载quartz包下的quartz.properties文件,如果我们 ...

  2. Java案例之随机验证码功能实现

    实现的功能比较简单,就是随机产生了四个字符然后输出.效果图如下,下面我会详细说一下实现这个功能用到了那些知识点,并且会把 这些知识点详细的介绍出来.哈哈 ,大神勿喷,对于初学Java的人帮助应该蛮大的 ...

  3. 【转】bmp文件格式详解

    先区分几个概念:16色和16位色一样吗? 不一样! 颜色位数,即是用多少位字节表示的值,每一位可以表示0和1两值.通常图片的颜色深度,简称色深,就是用位数来表示的,所以,我通常会看到8位色,16位色, ...

  4. Join vs merge vs lookup

    The obvious benefit of merge over join is the ability to add reject links. I can't upload pictures. ...

  5. OpenCV编程入门目录

    第一部分 快速上手OpenCV 第1 章 邂逅OpenCV 图像处理.计算机视觉与OpenCV OpenCV 概述 起源及发展 应用概述 .2OpenCV 基本架构分析 .3OpenCV3 带来了什么 ...

  6. Hadoop(hadoop,HBase)组件import到eclipse

    1.简介: 将源代码import到eclipse可以方便的阅读和修改源码. 2.环境说明: mac mvn工具(Apache Maven 3.3.3 ) 3.hadoop(CDH5.4.2) 1.进入 ...

  7. MiCode108 猜数字

    Description 相传,十八世纪的数学家喜欢玩一种猜数字的小游戏,规则如下: 首先裁判选定一个正整数数字 N (2 \leq N \leq 200)N(2≤N≤200),然后选择两个不同的整数X ...

  8. P1466 集合 Subset Sums(01背包求填充方案数)

    题目链接:https://www.luogu.org/problem/show?pid=1466 题目大意:对于从1到N (1 <= N <= 39) 的连续整数集合,能划分成两个子集合, ...

  9. POJ 1456 Supermarket(贪心+并查集)

    题目链接:http://poj.org/problem?id=1456 题目大意:有n件商品,每件商品都有它的价值和截止售卖日期(超过这个日期就不能再卖了).卖一件商品消耗一个单位时间,售卖顺序是可以 ...

  10. Django内置信号

    阅读目录(Content) Django中内置的signal 自定义信号 1.定义信号 2.注册信号 3.触发信号 回到顶部(go to top) Django中内置的signal Django中提供 ...