真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

重慶分公司 重慶分公司

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們
028-86922220

• 網(wǎng)站建設(shè)
• 網(wǎng)站制作
• 網(wǎng)站營銷
• 小程序
• 新聞動態(tài)
• 成功案例
• 關(guān)于我們

 
 
輸入框：{{content}}

 
 
內(nèi)容：
 {{content}}

var app2 = new Vue({
 el: '#app2',
 data: {
  content: ''
 }
});

 
 
內(nèi)容：
 {{content}}

js：

var app3 = new Vue({
 el: '#app3',
 data: {
  content: ''
 },
 methods: {
  inputHandler: function (event) {
   this.content = event.target.value;
  }
 }
});

可以看出，即使在 @input 定義的函數(shù)不帶參數(shù)，Vue.js 也會在定義的函數(shù)（示例中的 inputHandler）中傳入 event 原生事件對象。

效果：

1.3 單選框

單選框一般都有多個條件可供選擇，既然是單選框，自然希望實現(xiàn)互斥效果，我們可以使用 v-model 指令配合單選框的 value 來實現(xiàn)。

html：

 
 文學(xué)
 
 藝術(shù)
 
 經(jīng)濟
 

 
選擇了：{{checked}}

js：

var app4 = new Vue({
 el: '#app4',
 data: {
  checked: '文學(xué)'
 }
});

效果：

1.4 復(fù)選框

復(fù)選框的綁定方式與單選框相同，只不過復(fù)選框所對應(yīng)的數(shù)據(jù)類型是數(shù)組罷了。

html：

 
 文學(xué)
 
 藝術(shù)
 
 經(jīng)濟
 

 
選擇了：{{checked}}

js：

var app5= new Vue({
 el: '#app5',
 data: {
  checked: ['文學(xué)','藝術(shù)']
 }
});

效果：

1.5 下拉選擇框

1.5.1 單選

html：

 
  文學(xué)
  藝術(shù)
  經(jīng)濟
 
 

 
選擇了：{{selected}}

js：

var app6 = new Vue({
 el: '#app6',
 data: {
  selected: '1'
 }
});

效果：

可以看出，如果 含有 value 值，則會先匹配該值；如果沒有，則匹配 中的 text 值（比如示例中的 經(jīng)濟）。

1.5.2 多選

為 標簽添加 multiple 屬性，即可實現(xiàn)多選。

html：

 
  文學(xué)
  藝術(shù)
  經(jīng)濟
 

 
 

選擇了：{{selected}}

在實際應(yīng)用場景， 標簽中的 一般是通過 v-for 指令動態(tài)輸出的，其中每一項的 value 或 text 都可以使用 v-bind 動態(tài)輸出的。

html：

 
  {{option.text}}
  
 

 
 

選擇了：{{selected}}

js：

var app8 = new Vue({
 el: '#app8',
 data: {
  selected: '1',
  options: [
   {text: '文學(xué)', value: '1'},
   {text: '藝術(shù)', value: '2'}
  ]
 }
});

效果：

--------------------------------------------------------------------------------

因為 select 標簽的呈現(xiàn)樣式依賴于瀏覽器，所以在實際業(yè)務(wù)場景中，我們更多的是使用 div 來模擬 select 標簽的列表功能，而這可以通過使用 Vue.js 自定義組件的方式來實現(xiàn)一個通用的下拉選擇組件。

以上示例 DEMO

2 綁定動態(tài)變量

之前所說的示例，v-model 綁定的都是靜態(tài)變量。我們可以使用 v-bind 來綁定動態(tài)變量。

2.1 單選框

html：

 
 文學(xué)
 
 藝術(shù)
 
 經(jīng)濟
 

 
{{picked}}
 
{{value}},{{value2}},{{value3}}

js：

var app = new Vue({
 el: '#app',
 data: {
  picked: false,
  value: '文學(xué)',
  value2: '藝術(shù)',
  value3: '經(jīng)濟',
 }
});

效果：

示例中定義的單選框默認值為 picked 所定義的 false。當選中某個單選框時，則動態(tài)綁定在 :value 中定義的變量。

2.2 復(fù)選框

html：

 
 開關(guān)
 
checked：{{checked}}
 
value1：{{value1}}
 
value2：{{value2}}

js：

var app2 = new Vue({
 el: '#app2',
 data: {
  value1: '亮',
  value2: '暗',
  checked: ''
 }
});

效果：

復(fù)選框的默認值綁定的是 v-model 定義的變量，而勾選與取消勾選所綁定的值，則分別由 :true-value 與 false-value 來實現(xiàn)動態(tài)綁定。

2.3 下拉選擇框

html：

 
  文學(xué)
  藝術(shù)
 
 

 
選擇了：{{selected.number}}

js：

var app3 = new Vue({
 el: '#app3',
 data: {
  selected: ''
 }
});

看完上述內(nèi)容，你們對如何在Vue.js 中使用 v-model 指令有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道，感謝大家的支持。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。