提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Vue.js：使用v-bind在列表选项上绑定对象

VueJS列表对象 绑定 选项 bind 使用
2023-09-27 14:22:47 时间

使用v-bind在列表选项上绑定对象

此案例主要是通过使用v-bind：value将下拉列表的选项option元素绑定到对象类型，同时将下拉列表select元素的v-model也绑定到对象类型，实现在选项上操作对象的多个属性的效果。当在浏览器的页面进行显示的时候，在下拉列表中选择任意的一本书，则将在下面显示该图书的书名和售价，效果图见下面的效果图。、

相关代码的实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用v-bind在列表选项上绑定对象</title>
  <script src="../BLBL笔记/lib/vue.min.js"></script>
</head>
<body>
  <center>
    <div id="app">
      <span>书名：</span>
      <select name="" id="" v-model = "mySelected">
        <option disabled value="">请选择</option>
        <option v-bind:value="{name:'前端开发技术实战',price:149}">前端开发技术实战</option>
        <option v-bind:value="{name:'jQuery开发技术实战',price:99}">jQuery开发技术实战</option>
        <option v-bind:value="{name:'c++开发技术实战',price:92}">c++开发技术实战</option>
        <option v-bind:value="{name:'java开发技术实战',price:49}">java开发技术实战</option>
      </select>
      <p>当前选择的图书是：<br />{{mySelected.name}},售价：{{mySelected.price}}元</p>
    </div>
  </div>
  </center>
  <script>   
    var app = new Vue({
      el:"#app",
      data:{
        mySelected:{name:'jQuery开发技术实战',price:99}
      }
    })
  </script>
</body>
</html>

浏览器的运行效果图

在这里插入图片描述

相关代码的解释

mySelected:{name:'jQuery开发技术实战',price:99}

上面这段代码表示mySelected变量是一个对象类型，用于保存选择的结果

<option v-bind:value="{name:'前端开发技术实战',price:149}">前端开发技术实战</option>

上面这段代码表示将{name:'前端开发技术实战',price:149}对象绑定到下拉列表的选项上，虽然在下拉列表中显示为前端开发技术实战，但实质上选择的是该对象，而不是选择对应的书📕名哦

相关文章