Vue条件渲染：根据下拉选择控制元素显示

嘿，这个需求其实很简单，咱们只需要借助Vue的双向数据绑定和v-if指令就能轻松搞定。下面是具体步骤和完整代码：

步骤1：给下拉框添加v-model绑定数据 #

首先得让Vue能跟踪下拉框的选中值，所以给<select>加上v-model，绑定一个咱们定义的数据属性，比如selectedLang：

<select class="custom-select custom-select-sm" id="lang" v-model="selectedLang">
  <option value="1">English</option>
  <option value="2">Svenska</option>
</select>
<a class="nav-link" v-if="selectedLang === '1'" href="#">People</a>

注意：HTML里表单元素的value默认是字符串类型，所以判断的时候要和字符串'1'/'2'比较，别写成数字哦。

步骤2：在Vue实例中定义绑定的数据 #

接下来要在你的Vue实例（或组件）的data选项里声明selectedLang，可以给它一个初始值，比如默认选中English：

new Vue({
  el: '#app', // 假设你的根容器id是app
  data: {
    selectedLang: '1' // 初始选中第一个选项
  }
})

灵活调整显示条件 #

如果想要在选中Svenska（value=2）的时候显示<a>元素，只需要把v-if的条件改成selectedLang === '2'就行：

<a class="nav-link" v-if="selectedLang === '2'" href="#">People</a>

这样一来，当你切换下拉框的选项时，<a>元素就会根据选中的值自动显示或隐藏啦！

内容的提问来源于stack exchange，提问作者user12978902