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

單選按鈕：

<div id="app"><input type="radio" v-model="picked" :value="value"><label>單選按鈕</label><p>{{picked}}</p><p>{{value}}</p></div> <!-- 開發(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>

在選中時，app.picked===app.value?? 值都是123

?

復選框：

<div id="app"><inputtype="checkbox"v-model="toggle":true-value="value1":false-value="value2"><label>復選框</label><p>{{toggle}}</p><p>{{value1}}</p><p>{{value2}}</p></div> <!-- 開發(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>

選中時，app.toggle===app.value1;未勾選時，app.toggle===app.value2

?

下拉框：

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

當選中時，app.selected是一個Object,所以app.selected.number===123。

?

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

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

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