有時(shí)需要綁定一個(gè)動(dòng)態(tài)的數(shù)據(jù)，可以用v-bind來(lái)實(shí)現(xiàn)

單選按鈕：

<div id="app"><input type="radio" v-model="picked" :value="value"><label>單選按鈕</label><p>{{picked}}</p><p>{{value}}</p></div> <!-- 開(kāi)發(fā)環(huán)境版本，包含了有幫助的命令行警告 --> <script src=" href='https://cdn.jsdelivr.net/npm/vue/dist/vue.js">https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>? <script>new Vue({el:'#app',data:{picked:false,value:123}}) </script>

在選中時(shí)，app.picked===app.value?? 值都是123

?

復(fù)選框：

<div id="app"><inputtype="checkbox"v-model="toggle":true-value="value1":false-value="value2"><label>復(fù)選框</label><p>{{toggle}}</p><p>{{value1}}</p><p>{{value2}}</p></div> <!-- 開(kāi)發(fā)環(huán)境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>? <script>new Vue({el:'#app',data:{toggle:false,value1:'a',value2:'b'}}) </script>

選中時(shí)，app.toggle===app.value1;未勾選時(shí)，app.toggle===app.value2

?

下拉框：

<div id="app"><select v-model="selected"><option :value="{number:123}">123</option></select>{{selected.number}}</div> <!-- 開(kāi)發(fā)環(huán)境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>? <script>new Vue({el:'#app',data:{selected:''}}) </script>

當(dāng)選中時(shí)，app.selected是一個(gè)Object,所以app.selected.number===123。

?

與50位技術(shù)專(zhuān)家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的Vue使用v-bind绑定动态数据的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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