Vue中數(shù)據(jù)綁定的示例分析

這篇文章主要為大家展示了“Vue中數(shù)據(jù)綁定的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Vue中數(shù)據(jù)綁定的示例分析”這篇文章吧。

10年積累的網(wǎng)站制作、做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先做網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有雙流免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

為什么綁定

簡(jiǎn)單的數(shù)據(jù)渲染，包括表達(dá)式、函數(shù)在內(nèi)。其實(shí)都只是在標(biāo)簽中渲染，如果遇到以下情況怎么辦呢：

需要在標(biāo)簽內(nèi)部進(jìn)行某種 "騷操作" 。

需要控制流來控制不同數(shù)據(jù)下的不同渲染效果。

需要渲染一個(gè)數(shù)組。

這時(shí)候簡(jiǎn)單渲染就不能很好的解決問題了，怎么辦 ？

來一發(fā)數(shù)據(jù)綁定吧！

綁定是什么

在了解綁定是什么之前，先了解一下什么是指令：

在 " vue" 中，指令是帶有 v- 前綴的特殊屬性，用來修飾標(biāo)簽的（自定義組件在這里也統(tǒng)一歸為標(biāo)簽，因?yàn)槠涫褂梅绞胶驮鷺?biāo)簽一樣），其值的約束和模板語(yǔ)法一樣，支持表達(dá)式、變量。

指令會(huì)監(jiān)測(cè)其值的變化，并將其的變化反應(yīng)給所處的DOM

我們來看一下上一章最后的例子：

<h2>{{ if(msg == '1') return time }}</h2>

在這里我們是想利用控制流來控制是否顯示時(shí)間，但是很遺憾，模板語(yǔ)法并不支持js語(yǔ)法。

但是 " vue" 中有這樣一個(gè)指令來彌補(bǔ)模板語(yǔ)法不支持 js語(yǔ)法的遺憾：

v-if

下面看看修改后的代碼：

<h2 v-if="msg=='1'">{{ formatTime(time) }}</h2>

先將 msg的值賦值為1：

然后再修改一下 msg的值看看：

什么也沒有顯示，因?yàn)槲覀?msg的值并不是 1。

v-if 指令很完美的解決了我們最開始提出來的第二個(gè)問題：

需要控制流來控制不同數(shù)據(jù)下的不同渲染效果。

讓我們回到最開始的話題。

這就是指令，而在官方原生的指令中，有一個(gè)指令是專門用來綁定標(biāo)簽屬性的：

v-bind

命名很形象，bind 直譯就是綁定的意思。

如何綁定

這里利用 div標(biāo)簽展示一下 v-bind 的使用方式，用在其它標(biāo)簽上同理：

<div v-bind:屬性名="表達(dá)式"></div>

我們拿第一個(gè)問題舉例實(shí)踐一下：

需要在標(biāo)簽內(nèi)部進(jìn)行某種 "騷操作"。

這里我們就根據(jù) isDark的值來確定時(shí)間顯示的背景色吧

當(dāng) isDark為 true 的時(shí)候，背景色變成黑色，文字變成白色。

當(dāng) isDark為 false的時(shí)候，背景色變成白色，文字變成黑色。

先來定義 isDark:

data() {
  return {
   msg: 'hello vue',
   time: new Date(),
   isDark: False
  }
 }

然后添加一下兩種條件下的樣式：

<style>
 .dark{
  background-color: black;
  color: white;
 }

 .light{
  background-color: white;
  color: black;
 }
</style>

接下來給 h2標(biāo)簽加上綁定指令：

<h2 v-bind:class="isDark ? 'dark' : 'light'">{{ formatTime(time) }}</h2>

效果如下：

我們將 isDark 的值修改成 true：

很完美的達(dá)到了所需求的效果。

這就是指令的魅力。

最后一個(gè)問題

上述兩個(gè)指令解決了我們最初提出來三個(gè)問題中的兩個(gè)，那么剩下一個(gè)呢？

需要渲染一個(gè)數(shù)組。

當(dāng)我們需要渲染表格的時(shí)候就會(huì)遇到這個(gè)場(chǎng)景，如何去渲染一個(gè)數(shù)組呢？模板語(yǔ)法又并不支持這么復(fù)雜的操作。

請(qǐng)出本章最后一個(gè)指令：

v-for

嗯，還是很形象。js里面也有 for 嘛~

先看看它是做什么的：

v-for 會(huì)為數(shù)據(jù)源（綁定的列表）中的每一項(xiàng)，生成一個(gè)同類的標(biāo)簽。

然后看看怎么用，這里用 a 標(biāo)簽做說明，其他標(biāo)簽類似：

<!-- 寫法1 -->

<a v-for="別名 in 數(shù)據(jù)源" v-bind:key="唯一標(biāo)識(shí)">{{ 別名.字段 }}</a>

<!-- 寫法2 -->

<a v-for="(下標(biāo), 別名) in 數(shù)據(jù)源" v-bind:key="唯一標(biāo)識(shí)">{{ 別名.字段 }}</a>

因?yàn)樾掳姹镜?vue要求使用 v-for指令渲染的標(biāo)簽必須綁定一個(gè)key用做唯一標(biāo)識(shí)，大多數(shù)情況下我們可以直接使用下標(biāo)來進(jìn)行標(biāo)識(shí)

繼續(xù)使用我們之前的代碼進(jìn)行演示，先定義一個(gè) url的數(shù)組：

data() {
  return {
   msg: 'hello vue',
   time: new Date(),
   isDark: true,
   urlList: [
    {
     text: '鏈接1',
     url: '#1'
    },

    {
     text: '鏈接2',
     url: '#2'
    },

    {
     text: '鏈接3',
     url: '#3'
    }
   ]
  }
 }

然后渲染安排一波：

<a v-for="(item, index) in urlList" v-bind:key="index" v-bind:href="item.url" rel="external nofollow" >{{item.text}}</a>

效果如下：

渲染的結(jié)果是三個(gè) a 標(biāo)簽，非常正確~

很完美的解決了最后一個(gè)問題。

還有些什么指令呢？

官方還有其他的指令，這里再提一個(gè)：

v-on

v-on 指令可以綁定事件，比如說按鈕的點(diǎn)擊事件。

像上面切換背景的例子中，可以通過一個(gè)按鈕的點(diǎn)擊事件來修改 isDark的值，從而控制背景的改變。就不需要每次都手動(dòng)來修改下 isDark的值了。

以上是“Vue中數(shù)據(jù)綁定的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁(yè)題目：Vue中數(shù)據(jù)綁定的示例分析
文章分享：http://muchs.cn/article20/johojo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、外貿(mào)網(wǎng)站建設(shè)、微信小程序、網(wǎng)站策劃、響應(yīng)式網(wǎng)站、定制網(wǎng)站

廣告

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