第二节:指令的使用(2)

1、v-else 必须跟着v-if 或者 v-show 一起使用 ,充当else的作用。

<div id="example">
         <p v-if="ok">男人</p>
         <p v-else="ok">女人</p>
</div><script>  new Vue({    el:"#example",    data:{      ok:ture    }  });

</script>

2、v-model 用来在input ,select , text, checkbox,radio等表单标签控件上创建双向数据绑定。

<form>
        姓名:<input type="text" v-model="data.name" placeholder="" /><br />
        性别:<input type="radio" id="man" value="one" v-model="data.sex" />
                <lable for="man">男</lable>
                <input type="radio" id="male" value="two" v-model="data.sex" />
                <lable for="male">女</lable>
                <input type="radio" id="noman" value="three" v-model="data.sex" />
                <lable for="noman">隐私</lable><br />
        兴趣:<input type="checkbox" id ="book" value="book" v-model="data.interest" />
                <label for="book">阅读</label>
                <input type="checkbox" id ="swim" value="swim" v-model="data.interest" />
                <label for="swim">游泳</label>
                <input type="checkbox" id ="game" value="game" v-model="data.interest" />
                <label for="game">游戏</label>
                <input type="checkbox" id ="song" value="song" v-model="data.interest" />
                <label for="song">唱歌</label><br />
        身份:<select v-model="data.identity">
                <option value="teacher">教师</option>
                <option value="doctor">医生</option>
                <option value="lawyer">律师</option>
             </select></form>

<script>
  new Vue({    el:"#example",    data:{      data:{        name:"1",        sex:"one",        interest:["book","song"],        identity:"teacher"      }    }
  });</script>
 

  注意: 在表单控件赋默认值的时候,如果你想这样:<input type="checkbox" id ="book" value="book" v-model="data.interest" selected/>

     那么你在data.interest中也必须有“book”的值。html中标签的默认值必须在Vue模版中的默认值之中,因为在v-model进行的是双向的数据绑定。

3、v-model 可以添加多个参数:number、lazy、debounce

  • number 将用户输入的值自动转换成Number类型,如果原值转换结果为NaN,则返回原值。
  • lazy 将input的数据改变发生到change事件中,不添加默认是同步改变的。
  • debounce 设置最小的延时,用户输入数据的时候,同步数据的延时。(如果进行高消耗的操作比较有用,例如随时发送AJAX请求。)
时间: 2024-10-19 05:41:51

第二节:指令的使用(2)的相关文章

【读书笔记】《鸟哥Linux私房菜-基础知识篇》第二节 基础命令

第二节 基础命令 uname –r 查询Linux核心版本. 装置及装置在Linux内的文件名 IDE硬盘机 /dev/hd[a-d] SCSI/SATA/USB硬盘机 /dev/sd[a-p] USB快闪碟 /dev/sd[a-p] 软盘驱动器 /dev/fd[0-1] 打印机 25针:/dev/lp[0-2] USB:/dev/usb/lp[0-15] 鼠标 USB:/dev/usb/mouse[0-15] PS2:/dev/psaux 当前CDROM/DVDROM /dev/cdrom 当

ppm开源控 (更新到 第二节:ppm解码器 )

DIY 航模模型遥控器是非常有意思的,我也来点想法,先给一个“工业化”的方案 此方案是利用遥控器模拟口的 ppm输出,彻底替换遥控器原来的接收发射系统 (本人试验过 天飞7,8, flysky i6都有很好的 ppm输出) 概述 控制的途径是遥控器 -〉 ppm解码器 -〉无线串口 -> 2.4G -> 无线串口 -〉舵机控制器 此方案的特点是:1)器件都好买,且比较成熟. 但也比较贵,可能要花200多元2)性能应该是不错,其中2.4g称2000米以上, 场地有限,本人只实验过地面拉距400米

【软件构造】第二章第二节 软件构造的过程、系统和工具

第二章第二节 软件构造的过程.系统和工具 Outline 广义的软件构造过程 编程 静态代码分析 动态代码分析 调试与测试 重构 狭义的软件构造过程 构造系统:经典BUILD场景 构造系统的组件 构造过程和构造描述 Java编译工具 子目标和结构变体 构造工具 Notes ## 广义的软件构造过程 [编程(Coding)] 开发语言:如Java.C.Python 使用IDE(集成开发工具)的优势(组成) 方便编写代码和管理文件(有代码编辑器,代码重构工具.文件和库(Library)管理工具) 能

杨森翔:春节文化大观上编 第三章 春节古诗词 目录 第一节:春节诗词概述 一、 除夕诗词概述 二、元日诗词概述 三、 元宵诗词概述 第二节:春节古诗词拾萃

杨森翔:春节文化大观上编 第三章 春节古诗词 目录 第一节:春节诗词概述 一. 除夕诗词概述 二.元日诗词概述 三. 元宵诗词概述 第二节:春节古诗词拾萃 一.腊祭诗词 二.祭灶诗词 三.除夕诗词 四.元旦诗词 五.人日诗词 六.元宵诗词 第一节:春节古诗词概述 中国的春节,作为除旧迎新的节日,时间相当长,从年前的腊月二十三,天空中就似乎弥漫了节日的气息.这种节日的气氛,在保持传统风俗较好的地方,甚至会持续到二月二龙抬头的时候,但欢度春节的高潮,应该说是自除夕始一直到上元之夜.因此,历代歌咏和反

centos单用户 救援 运行级别 第二节课

centos单用户 救援 运行级别 第二节课 yum工具在minimal安装级别就已经安装 yum list:列出远程服务器端的所有的包的列表 安装桌面套件,安装图形化桌面 yum groupinstall -y "desktop"yum groupinstall -y "X window system" 临时显示英文 LANG=en

第二节 分支结构

在程序开发中,分支结构的使用频率要多于循环结构,10次分支,4次循环. 程序开发三种情况:分支,循环,分支 (1) if的三种格式: int a = 10; if(a > o) { printf("%d",a) } 当条件表达式的条件成立时,或为真时,执行大括号内的语句,否则执行if之后的语句. (2) char sex = 0; printf("请输入你的性别:m或者f"); scanf("%c",&sex); if(sex ==

Centos7 Openstack - (第二节)添加认证服务(Keystone)

Centos7 install Openstack - (第二节)添加认证服务(Keystone) 我的blog地址:http://www.cnblogs.com/caoguo 根据openstack官方文档配置 官方文档地址: http://docs.openstack.org/juno/install-guide/install/yum/content/# 0x01.认证服务安装与配置(控制节点) [[email protected] ~]# mysql -uroot -p MariaDB

第二节 Java Swing中的基本容器:JFrame

第二节 基本容器:JFrame 如果要使用Swing创建一个窗口,则直接使用JFrame即可,此类事Component类的子类,常用方法如下: 小试牛刀 创建一个简单的窗口 import java.awt.*; import java.io.*; import javax.swing.*; public class JavaSwingTest { public static void main(String args[]) throws IOException{ test1(); } //创建一

第二节 什么是接口

什么是接口 主讲教师:王少华     QQ群号:483773664 学习目标 掌握接口的定义与使用 理解接口与抽象类的区别 一.什么是接口 现实生活中,我们经常听到接口这个词,比如USB接口,那它是什么意思呢?我们拿USB接口为例,不管那个厂商生产的USB存储器,我们都可以通过USB接口让电脑识别出来,这是为什么呢?这是因为这些生产厂商遵循了一套相同的标准,并按照这个标准来生成USB设备. 在软件中,接口同样是一种规范和标准,它们可以约束类的行为,是一些方法特征的集合,但是没有方法的实现.因此,

《Pro Android Graphics》读书笔记之第二节

Android Digital Video: Formats, Concepts and Optimization Android Digital Video Formats: MPEG4 H.264 and WebM VP8 H.263 支持老显示器 MPEG4 SP   supported for commercial video(支持商业视频) 3GP Google在2.3.3中加入对WebM的支持 video Stream 4.0以后版本 recommend using MPEG-4 H