vue3.0CLI-2.4新组件Forms.vue怎么用

小编给大家分享一下vue3.0 CLI - 2.4新组件Forms.vue怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

成都创新互联总部坐落于成都市区，致力网站建设服务有网站建设、成都网站制作、网络营销策划、网页设计、网站维护、公众号搭建、微信小程序定制开发、软件开发等为企业提供一整套的信息化建设解决方案。创造真正意义上的网站建设，为互联网品牌在互动行销领域创造价值而不懈努力！

新组件 - 新路由 Forms.vue ( 下面仅介绍如何创立, 不进行介绍 ) ：

新建路由 ( 在 router.js 中 )：

import Forms from './views/Forms.vue'

export default new Router({
 routes: [
  { path: '/', .......},
  {
   path: '/form',
   name: 'forms',
   component: Forms
  },
  { path: '/about', ......}
 ]
})

这样就建立新的路由，这块我建立了新的 git commit。

注意：组件名称尽量满足以下要求：1、勿采用 HTML 标签名；2、勿采用 vue 内部保留的名称如 slot ( 插槽 )、partial、component等。3、以字母开头。

文本表单

贴个代码，具体的使用方法不多介绍：

需要注意的是：{{ someProp }} 中的红色部分无效。

选择框

单选框：
 
 {{ checked1 }}

 

  复选集合：
  
  章三
  
  里斯
  
  王五
  

  所选的人有: {{ checkedNames }}
 

 

  单选集合：
  
  男
  
  女
  

  性别是: {{ picked }}
 

 

  单选下拉框：
  
   请选择
   A
   B
   C
  
  选择的是: {{ selected1 }}
 

 

  多选下拉框：
  
   A
   B
   C
  
  选择的是: {{ selected2 }}
 

export default {
 name: 'forms', // eslint-disable-next-line
 data: function () { return {
  checked1: null,
  checkedNames: [],
  picked: null,
  selected1: null,
  selected2: [],
  message1: null,
  message2: null // eslint-disable-next-line
 } }
}

注意：尽管有的选择框，无须在 data 属性中也声明同样的属性，但别这么做，任何选择框的属性，都应该在 data 声明该属性。

对于多选框，也可以采用 v-for 来循环显示，读者可自行实验。

值绑定

上面介绍那些选择框，属性绑定的默认的值。对此先来看看下面这个例子：

{{ checked1 }}

{{ checked11 }}

上面的例子，是系统默认的，选中之后 checked1 是 true。下面就是修改了选中之后，属性 checked11 对应的值，也就是【有效】。

再比如：绑定到a：

其中 v-bind:value="a" 意思：选中之后，data.pick = data.a 。在 js 中 data 必须要设置这两个属性，且 a 要有初始值。

可以绑定到对象：绑定到对象：

也可以：绑定到对象：

对于所有的上面介绍的表单，都可以采用这种值绑定，限于篇幅，不一一介绍。

最后还有 - 修饰符

.lazy   .number   .trim

.lazy 改变 input 和 textarea 输入框的更新模式。上面的两个输入框的例子，都是在敲键盘一边输入一边更新；加入这个之后，变成失去焦点才会更新。

.number 则是将强制输入转换为 Number 类型。

.trim 去掉输入的字符串空格 ( 注意：加入之后，不但首尾的空格会去掉，中间部分连续多个空格会替换为单个空格 )。

比如如下例子：

以上是“vue3.0 CLI - 2.4新组件Forms.vue怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！