基本數(shù)據(jù)渲染和指令

創(chuàng)建 01-基本數(shù)據(jù)渲染和指令.html

你看到的?v-bind?特性被稱為指令。指令帶有前綴?v-?

除了使用插值表達(dá)式{{}}進(jìn)行數(shù)據(jù)渲染，也可以使用 v-bind指令，它的簡(jiǎn)寫的形式就是一個(gè)冒號(hào)（:）

data: {content: '我是標(biāo)題',message: '頁(yè)面加載于 ' + new Date().toLocaleString() } <!-- 如果要將模型數(shù)據(jù)綁定在html屬性中，則使用 v-bind 指令此時(shí)title中顯示的是模型數(shù)據(jù) --> <h1 v-bind:title="message">{{content}} </h1><!-- v-bind 指令的簡(jiǎn)寫形式： 冒號(hào)（:） --> <h1 :title="message">{{content}} </h1>

雙向數(shù)據(jù)綁定

創(chuàng)建 02-雙向數(shù)據(jù)綁定.html

雙向數(shù)據(jù)綁定和單向數(shù)據(jù)綁定：使用?v-model?進(jìn)行雙向數(shù)據(jù)綁定

data: {searchMap:{keyWord: '尚硅谷'} } <!-- v-bind:value只能進(jìn)行單向的數(shù)據(jù)渲染 --> <input type="text" v-bind:value="searchMap.keyWord"> <!-- v-model 可以進(jìn)行雙向的數(shù)據(jù)綁定 --> <input type="text" v-model="searchMap.keyWord"><p>您要查詢的是：{{searchMap.keyWord}}</p>

?

總結(jié)

以上是生活随笔為你收集整理的vue指令-单向和双向绑定的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。