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

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

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

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

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

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

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

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

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

?

總結(jié)

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

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