小編給大家分享一下vue3.0 CLI - 2.4新組件Forms.vue怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供云州企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、H5場景定制、小程序制作等業(yè)務(wù)。10年已為云州眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

新組件 - 新路由 Forms.vue ( 下面僅介紹如何創(chuàng)立, 不進(jìn)行介紹 ) ：

<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 標(biāo)簽名；2、勿采用 vue 內(nèi)部保留的名稱如 slot ( 插槽 )、partial、component等。3、以字母開頭。

文本表單

貼個(gè)代碼，具體的使用方法不多介紹：

<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" >復(fù)選集合：</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 屬性中也聲明同樣的屬性，但別這么做，任何選擇框的屬性，都應(yīng)該在 data 聲明該屬性。

對于多選框，也可以采用 v-for 來循環(huán)顯示，讀者可自行實(shí)驗(yàn)。

值綁定

上面介紹那些選擇框，屬性綁定的默認(rèn)的值。對此先來看看下面這個(gè)例子：

<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>

上面的例子，是系統(tǒng)默認(rèn)的，選中之后 checked1 是 true。下面就是修改了選中之后，屬性 checked11 對應(yīng)的值，也就是【有效】。

再比如：<label >綁定到a：<input type="radio" v-model="pick" v-bind:value="a"></label>

其中 v-bind:value="a" 意思：選中之后，data.pick = data.a 。在 js 中 data 必須要設(shè)置這兩個(gè)屬性，且 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 輸入框的更新模式。上面的兩個(gè)輸入框的例子，都是在敲鍵盤一邊輸入一邊更新；加入這個(gè)之后，變成失去焦點(diǎn)才會(huì)更新。

.number 則是將強(qiáng)制輸入轉(zhuǎn)換為 Number 類型。

.trim 去掉輸入的字符串空格 ( 注意：加入之后，不但首尾的空格會(huì)去掉，中間部分連續(xù)多個(gè)空格會(huì)替換為單個(gè)空格 )。

比如如下例子： <textarea v-model.trim="message2" placeholder="多行文本"></textarea>

以上是“vue3.0 CLI - 2.4新組件Forms.vue怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享文章：vue3.0CLI-2.4新組件Forms.vue怎么用-創(chuàng)新互聯(lián)
網(wǎng)址分享：http://aaarwkj.com/article0/ccgjoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、網(wǎng)站營銷、網(wǎng)站設(shè)計(jì)公司、關(guān)鍵詞優(yōu)化、App開發(fā)、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)