代码之家 › 专栏 › 技术社区 › kabugh

从两个不同的状态中选择一个选项

vue.js javascript

kabugh · 技术社区 · 6 年前

我有两个分开的 states :一个 array 以及 string .在点击其中一个元素之后,它得到一个类 highlight 变成 selected 是的。如何显示 挑选出来的 :来自 阵列 或者 一串 是的。

在这种情况下:我希望能够选择(点击后添加类突出显示)第6段。

这是一个 fiddle 是的。

var items = []
for (var i = 1; i <= 5; i++) {
  items.push({
    id: i
  })
}
new Vue({
  el: "#app",
  data: {
    items,
    selected: undefined,
  },
  methods: {}
})

li.highlight {
  background: yellow;
}

p,
h1 {
  margin-top: 20px;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div id="app">
  <ul>
    <li v-for="item in items" :class="{highlight:item == selected}" @click="selected = item">{{item.id}}</li>
  </ul>
  <p>6</p>

  <h1>Selected item: {{ this.selected }}</h1>
</div>

1 回复 | 直到 6 年前

Jack jdeoel Allan Empalmado 6 年前

我希望你想展示 6 当点击…如果是这样,您可以指定相同的数据类型,如 {id: 6} 点击。

var items = []
for (var i = 1; i <= 5; i++) {
  items.push({
    id: i
  })
}
new Vue({
  el: "#app",
  data: {
    items,
    selected: undefined,
  },
  methods: {}
})

.highlight {
  background: yellow;
}

p,
h1 {
  margin-top: 20px;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div id="app">
  <ul>
    <li v-for="item in items" :class="{highlight:item == selected}" @click="selected = item">{{item.id}}</li>
  </ul>
  <p :class="{highlight: selected && selected.id === 6}" @click="selected = {id: 6}">6</p>

  <h1>Selected item: {{ this.selected }}</h1>
</div>

推荐文章

base · 单击按钮时,如何从父组件打开位于子组件中的模态?

4 月前

Ben Foltz · 更新/删除递归子组件

5 月前

Andy BnOne · 我可以为泛型类型的道具设置默认值吗

5 月前

Felix · 更改vuetify v-field标签字体大小

6 月前

user2263572 · Vue.js在脚本与模板中调用util时的不同功能(以及考虑模板解包)

6 月前

CentralDev · 如何导出和导入js文件?

9 月前

Michael · 在Nuxt/Vue中安装传单的正确方法

9 月前

gespinha · 当元素不再可见时,如何更改ref元素?

10 月前

Brad · Vue Child组件对检索到的pinia/vueFire对象失去反应性

10 月前

gespinha · 使用Vue Router时,路由参数不会在Vue组件内渲染

10 月前