vue 开发 问题 统计

原创
2018/07/01 10:52
阅读数 139

select下拉框获取该条数据的其他属性 解决思路是:通过v-model指令,在select标签上通过v-model指定一个属性值,然后通过这个属性值访问该记录的属性值。 

<!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>

 

[Vue warn]: Do not use built-in or reserved HTML elements as component id: main

问题可能是创建的 vue 文件名称和 export default name 重复了。

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部
返回顶部
顶部