Vue使用v-bind绑定动态数据-蒲公英云

Vue使用v-bind绑定动态数据

港控/mmm° 2023-10-18 08:59 103阅读 0赞

有时需要绑定一个动态的数据，可以用v-bind来实现

单选按钮：

<div id="app">
  <input type="radio" v-model="picked" :value="value">
  <label>单选按钮</label>
  <p>{
   {picked}}</p>
  <p>{
   {value}}</p>
 </div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<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">
  <input
   type="checkbox"
   v-model="toggle"
   :true-value="value1"
   :false-value="value2">
  <label>复选框</label>
  <p>{
   {toggle}}</p>
  <p>{
   {value1}}</p>
  <p>{
   {value2}}</p>
 </div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<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

![Image 1][] 70 1

下拉框：

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