您好,登录后才能下订单哦!
小编给大家分享一下vue3.0 CLI - 2.4新组件Forms.vue怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
新组件 - 新路由 Forms.vue ( 下面仅介绍如何创立, 不进行介绍 ) :
<template><div class="form"> <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> </div></template> <script> export default { name: 'forms', // eslint-disable-next-line data: function () { return { d: '' // eslint-disable-next-line } } } </script>
新建路由 ( 在 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、以字母开头。
文本表单
贴个代码,具体的使用方法不多介绍:
<template><div class="form"> <input v-model="message1" placeholder="单行文本"> <p>单行文本: {{ message1 }}</p> <span>多行文本:</span> <p>{{ message2 }}</p> <textarea v-model="message2" placeholder="多行文本"></textarea> </div></template> <script> export default { name: 'forms', // eslint-disable-next-line data: function () { return { message1: '', message2: '差值' // eslint-disable-next-line } } } </script>
需要注意的是:<textarea v-model="message2" placeholder="多行文本">{{ someProp }}</textarea>
中的红色部分无效。
选择框
<label for="cd" >单选框:</label> <input type="checkbox" id="cd" v-model="checked1"> <label for="cd">{{ checked1 }}</label> <div> <label for="jack" >复选集合:</label> <input type="checkbox" id="name1" value="章三" v-model="checkedNames"> <label for="name1">章三</label> <input type="checkbox" id="name2" value="里斯" v-model="checkedNames"> <label for="name2">里斯</label> <input type="checkbox" id="name3" value="王五" v-model="checkedNames"> <label for="name3">王五</label> <br> <span>所选的人有: {{ checkedNames }}</span> </div> <div> <label >单选集合:</label> <input type="radio" id="nan" value="男" v-model="picked"> <label for="nan">男</label> <input type="radio" id="nv" value="女" v-model="picked"> <label for="nv">女</label> <br> <span>性别是: {{ picked }}</span> </div> <div> <label >单选下拉框:</label> <select v-model="selected1"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>选择的是: {{ selected1 }}</span> </div> <div> <label >多选下拉框:</label> <select v-model="selected2" multiple > <option>A</option> <option>B</option> <option>C</option> </select> <span>选择的是: {{ selected2 }}</span> </div> 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 来循环显示,读者可自行实验。
值绑定
上面介绍那些选择框,属性绑定的默认的值。对此先来看看下面这个例子:
<input type="checkbox" id="cd" v-model="checked1"> <label for="cd">{{ checked1 }}</label> <input type="checkbox" id="cd1" v-model="checked11" true-value="有效" false-value="无效" > <label for="cd1">{{ checked11 }}</label>
上面的例子,是系统默认的,选中之后 checked1 是 true。下面就是修改了选中之后,属性 checked11 对应的值,也就是【有效】。
再比如:<label >绑定到a:<input type="radio" v-model="pick" v-bind:value="a"></label>
其中 v-bind:value="a" 意思:选中之后,data.pick = data.a 。在 js 中 data 必须要设置这两个属性,且 a 要有初始值。
可以绑定到对象:<label >
绑定到对象:<input type="radio" v-model="pick1" v-bind:value="{a:1}"></label>
也可以:<label >绑定到对象:<input type="radio" v-model="pick1" v-bind:value="obj"></label>
对于所有的上面介绍的表单,都可以采用这种值绑定,限于篇幅,不一一介绍。
最后还有 - 修饰符
.lazy .number .trim
.lazy 改变 input 和 textarea 输入框的更新模式。上面的两个输入框的例子,都是在敲键盘一边输入一边更新;加入这个之后,变成失去焦点才会更新。
.number 则是将强制输入转换为 Number 类型。
.trim 去掉输入的字符串空格 ( 注意:加入之后,不但首尾的空格会去掉,中间部分连续多个空格会替换为单个空格 )。
比如如下例子: <textarea v-model.trim="message2" placeholder="多行文本"></textarea>
以上是“vue3.0 CLI - 2.4新组件Forms.vue怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。