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

zl程序教程

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

当前栏目

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

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

使用v-bind在列表选项上绑定索引

此案例主要是通过在option元素中使用v-for语句设置对象数组为选项列表，并使用v-bind:value绑定自动生成的索引，实现任意操作选择的对象的效果。当在浏览器中显示页面的时候，在输入框中输入查询条件，如“零小唬”，在下拉列表中任意选择不同的选项，如“百度”，然后在单击“搜索”按钮，就会打开百度搜索引擎进行该内容的搜索，效果图见后面的样式效果图所示。

相关代码的实现

<!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">
      关键词:<input type="text" v-model = "myKeyword" style="width: 200px;">
      <select v-model = "mySelected">
        <option v-bind:value="index" v-for = "(myItem,index) in myItems">
          {{myItem.myName}}
        </option>
      </select>
      <button v-on:click="onClickButton" style="width: 80px;">搜索</button>
    </div>
  </div>
  </center>
  <script>   
    var app = new Vue({
      el:"#app",
      data:{
        myKeyword:'零小唬',
        mySelected:0,
        myItems:[
          {myName:"百度",myUrl:"https://www.baidu.com/s?wd="},
          {myName:"360",myUrl:"https://www.so.com/s?q="},
          {myName:"搜狗",myUrl:"https://www.sogou.com/web?query="}
      ]
      },
      methods: {
        onClickButton() {
          window.location = this.myItems[this.mySelected].myUrl+this.myKeyword;
        }
      }
    })
  </script>
</body>
</html>

浏览器的运行效果图

在这里插入图片描述

相关代码的解释

<option v-bind:value="index" v-for = "(myItem,index) in myItems">

上面这段代码表示使用myItems数组成员作为option，并将其自动生成的index作为绑定值，即v-bind：value = “index”

<select v-model = "mySelected">

上面这段代码表示将select的选择结果保存在mySelected中，该案例主要就是将index保存到mySelect中，因此主要是根据mySelected的值，即可知当前选择了对象数组myItems的哪一个对象item

相关文章