vue 開發問題統計

時間 2019-11-21

標籤 vue 開發問題統計简体版

原文原文鏈接

select下拉框獲取該條數據的其餘屬性解決思路是：經過v-model指令，在select標籤上經過v-model指定一個屬性值，而後經過這個屬性值訪問該記錄的屬性值。 javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue select bind data</title>
</head>
<body>
  <div id="app">
    <select v-model="selectedItem">
      <option v-for="item in items" :value="item">{{item.title}}</option>
    </select>
  </div>
</body>
<script type="text/javascript" src="../../static/js/vue.js"></script>
<script>

  var app = new Vue({
    el: '#app',
    data:{
      selectedItem:null,
      items:[
        {title: 'vue', price:123},
        {title: 'java', price:345},
        {title: 'linux', price:456},
        {title: 'python', price:890}
      ]
    },
    watch:{
      selectedItem(){
        console.log(JSON.stringify(this.selectedItem))
      }
    }
  })
</script>
</html>