12_尚硅谷_Vue_表单数据的自动收集

这里面呢，有一个表单输入的绑定什么概念呢，我们需要来看一下啊。大家知道啊，我们在写项目的时候，有时候会涉及到一个表单数据的提交，对吧？那表单数据的提交就有一个概念，我要收集表单数据对吧？那我们以前的搞法是不是找到每一个的输入框去取它的值。太费劲，我们要实现一个概念叫什么呢？自动收集。就我一输它就自己会收集好。啊，我后面再点击那个提交按钮的时候，我是不是数据已经有了呀，我就不用去收了啊，这个地方必然会用到一个指令叫什么呢？V-model。但是你要知道表单项有很多种标签是吧，很多类型啊，OK，有这种输入框，单行的或者什么多行的也有这个什么。

见光闪。这都这都不能说出来吗？多选radio，单选select下拉框。这几种是不是常见的呀？啊常见的，那下面呢，我们就举一个例子为例，来去看如何自动收集表单，输入数据，诶这里我有一个非常简单的表单啊好，那也就说我输入用户密码以及选择性别，指定我的爱好，选择城市啊，指定我的介绍以后点击注册，我希望能够去弹出我所有收集的信息。弹出来就行啊。好，来，我们来做一下。其实这个呢，也并不难啊。来看一下，首先一旦用到这个，我马上想到一个东西，就是用model，没别的。是吧，来一个用户名，假设用什么user类，那也就是说我们的这一个必然会去在我们的date里面进行什么初始化啊套路啊，来一个刚才外面叫什么看一下。

DEMO，那我就写什么。井号代是吧，记得逗号。写什么date？是吧，他。是什么啊，开始是初始值嘛，就空就可以了，对吧，好这个没问题啊来。我们先把这两个这个pass是不是类似的啊vega model。记得吗？PWD可以吧，可以没有问题，这个也是PWD数值空创的。好，别的先不管啊，我们先收集两个再说，来这里来个音铺的。来一个input的，最终我是不是要提交那个表单，对吧，但是我现在做的是啊，跟他说我们现在这个表单它会自动提交的，我不希望自动提交。

只是我们现在找不到这个后台，找不到人处理这个请求，所以出现了404。我现在做的是我不要自动提交表单，我是通过点击这个按钮，最终能够实现什么呢？啊，我通过加请求，手动的去提交请求。那也就是说它的自动行为，我是不是不要了呀？啊这个该怎么做呢。啊OK，表单它有一个啊，它有一个叫以前一个自然词性啊例啊，但是我们现在写不用了。等于什么？艾福吗？是吧，来，我就是hand。三可以吧，可以。好，我们来看一下啊，现在。来一个什么？

哪个他哪个他是吧，好，我现在要提示的是什么。是不是这个date里面所有的数据。对吧，那我就this啊this.this点什么呢？那我得一个一个取啊是吧，啊OK，那我就嗯取取在好像不太好，我就打印吧，打印好写一点，主要是this.user可以吧，好this.pwd。可以吧，因为这样打印比较方便。好，但是得说现在我要的效果是我不要提交表单啊，我们现在提不提交表单。大家看着啊，我先刷一下，接着输入A啊，输入123啊走，你什么意思提交了，我不想提交。我不想提交啊。

干嘛？爹什么意思，阻止默认行为是吧？好，我们来看一下，看看行不行啊。把这些这些乱七糟玩意给他先去掉啊。好，来啊，AA啊，1234走你。是个竹子的，你看其实这东西挺好用的。而且我输入数据是不是收集好了，收集好了OK，其实你不用这个打印都行，其实你只要看一下这个不就能看出来了吗。很懂吧，好来，我们是不是还有一些其他的啊，类似的搞法啊，下面我有一个概念叫什么呢，性别。性别里面是不是有两个input radio？他们收集的是同样一个属性来为model。定源是不是三啊，大家看啊好了。

那我们现在是不是应该收集，譬如说收集一个男或者一个女吧，那我怎么办呢？那我这个。比如说我这个里面负一个什么值合适了，那也就是说你希望谁选中啊，偏头小项我希望铝选中怎么办，对不？那这个地方首先得说。这个里面的这个input，首先它得有一个什么呢。Value value应该等于什么？哎，铝，而下面这个是什么。也是女啊，我两个都是女人吗？是不男的能看到吧啊，OK，而我这个微摸的都一样的，叫三吧。好了，我希望啊，默认它被选中，你说我这个值应该选什么才能让它选中呢？我写一个female行吗？

你如果开始的S的值得飞秒。行吗？嗯，OK，好，或者说我先不写吧，我们先看一下效果。先看效果，那也就是说上来谁也没选中。是吧，好，现在我的30个空窗吧。走你诶没点上啊。那请问啊，我怎么写我才能自动让女的勾选呢？他不就是这个吗。大家知道界面的显示是根据数据来显示的，对不对啊，OK，大家看一下手里。对吧，好啦，人说老师我万一我写成非面那会怎么样呢？有默认选中了吗？有没有没有。对不对，因为这一个值没有一个能跟Y扭进行匹配的，我这里面是不是有两个Y流可能性。

没有一个匹配的。能看懂吧，啊OK，当然我们肯定要写某一个，要就写空钻是吧，代表默认是没有勾选的，如果你想勾选，那你要不选来，要不写什么女啊，比如说我写个男啊，一个意思啊，男的被勾选。为什么好来下面这个。啊，下面这个啊，下面这个是我是不是多选的呀，那我收集下来应该是个什么类型的值。是不是数组比较合适啊，对吧。那数组比较合适，来啊，看这里。我们这里面呢，有三个input。能看到吧，三个音符的最终我应该是大家看到有一个现在假设叫likes，我开始就应该准备一个什么呢？空速度在这里。

接收数据对吧，接收数据好了，而我上面呢，看到啊。上面我这里来个input model就等于什么呢？Next等于这个速度啊，看这里。那我们这个地方每一个音input的，它是不是有一个固定的对应的value，听懂不好，这个我们写个什么篮球假设我就叫foot吧，啊不懒得写了啊。好，这一个应该是。哎，那个是basket是吧，篮球应该叫basket basket可以吧。好，这一个。Be应该学什么？乒乓对吧，啊乒乓。是吧，好啊。来啊，那下面我们就要说了，来看一下，最终如果我全部选中我的这个里面，这个数组里面应该是个什么样的样子的，是不是应该有三个字符串吧，我们来看一下啊。

走，你。你看。苏志明，是不是有个元素啦？是不是又加了一个。是不是又加了一个可以吧。我不就是收集了是个数组吗。能看到好，我现在有个问题，我希望一上来他被选中。我希望一上来他被群中咋办？那也就是说我一上来是不是有个数据。啊，而且一上来是不是足球被选中，那我应该等于什么，得看一下是不是他呀。跟着我好，我们先选择它看一下啊。Line刷新下。对的吧，对的。

没有任何问题啊，这都可以，那当然我这些数据都收集好以后，我一点注册是不是都能读出来呀，都能读出来好，那下面。首先我是不是有一个所有城市的列表，好，这次我们动态的去显示一下，假设我现在呢有一个。是所有城市的一个数组吧。列表不是数组吗？每一个城市呢，它都有两个数据，一个是它城市的ID。一个是它城市的名字。能看到吧，好，假设我就简单写北京啊，我也就写一个简单的拼音就行啊，好，下面。好歹来个三个啊。来三个改一改。啊，这个叫啊，譬如说上海可以吧，啊咋的啊，都放在一个里面了，那得把它们拿出来。

对吧，拿出来以后再用一个什么对虾啊，把它捞出来就行。好，再来一个。嗯，大话是吧，好把它搞一搞啊。呃，3333名字叫什么呢。广东是吧，行，广东啊东啊。好，那写好了，写好以后下面我们要显示出来，要把它呢，显示到我们当前的这个select里面是吧，那要去便利产生很多光品嘛，行不行。Option。好，这个谢谢，他显示应该显示的是那个吧。啊，这整不整，首先这里面要来一个什么v for。水去in in four cities。

没问题是吧？好，这个里面每一个是不是都是city有index是吧？这个地方肯定要有一个K冒号，K等于index拉，是吧，好，这个。点什么？是吧，但是大家要知道啊，最终提交给后台的不应该是name，而应该是它的什么呢？标识ID，那也就是说这个value应该写什么CDID，当我这么写的肯定不行。因为这个时候它会把它看成一个文本，而不会把它看成表达式啊，非常简单，来个什么冒号就可以。能看到吧，好，那也就是说我们来刷一下。

是不是有了？能不能看懂，好，那现在呢，我们要去实现一个效果，当我去选择某一个的时候。当我去选择某一个的时候，而我这个地方，这个对应的ID是不是要收集起来呀，那也就是说来看他怎么做了，首先啊，得给他写一个东西。叫model看到吧，好，接着给他指定一个来假设，我们就叫CTID。可以吧，好，那个CGID还是要先什么。是不是初始化一下，如果我写的它。对吧，那应该是跟哪个option匹配啊。是不是跟它匹配，因为它的Y点刚好是个什么。空串是不是看了吧？好，来试一下看看啊。

走，现在我的这个ctd是空刷了，好关键的东西来了，走你。有没有，有吧，有好，现在我问一个事啊，问一个事，我希望一上来他被选中。默认它就会被选中，咋办呢？那也就是说我们要跟第三个数据要什么匹配吧，怎么匹配呀。几是不是三呢，我们来看一下啊，看一下就知道有没有。如此简单吗？当然，我们现在初值13了，但是我要改了，他是不是也会随着改啊？嗯，很简单了。啊，后面这个啊，这个更简单了，已经说过了，这是一个多行的一样用什么model写一个这个假设是描述介绍dic啊description。

那我们在这里面干嘛，就写一下让它初始值啊，写个空串，那当然我去输入的时候啊，先刷一下啊。描述有不要。有，那也就是说我再去打印输出的时候，这里面相关的信息我是不是都可以打印出来可以吧，可以比如说点点。Max对吧，还有一个z.CID对吧，还就一个点DSC。是吧？好。来吧。来，我先输入A，输入一个B啊，取一个铝，接着选择这两个接着啊选择上海接着AAA是吧，点击。

可以去看这个相关的数据，AB女是吧，接着我是不是收集了两个数据。两个数据没问题，接着我输。二二什么不第二个吗？这个ID是这个ID2嘛，这ID嘛。接着我们输入的介绍信息是不是几个A呀。都可以吧。都可以，那也就是说我们后面要做功能的话，下一步就是将通过这个请求，将这个信息给他什么，是不是提交给后台。就这么搞定了啊。这里面大家一定要知道，我们现在讲这个东西都是为了去做一件事情。实现表单数据的什么自动收集？用的是哪个指令，Vega model？

对吧，就这么事，嗯，行。