vue v-for v-if問題

vue.js vue vue3

nick12345 2022-10-11 09:54:07 ‧ 1206 瀏覽

分享至

b是一組數字，但我不懂如果是"0"的話，怎樣才能整行option不show出來。

b<=0?(b<=0?0:b):"" 如果這樣寫會有一行是空白，怎樣寫在option外邊而又做到我要的效果。

<select name="time" class="form-control" v-model="time" required>
        <option v-for="(b,a) in Num" :value="a" v-text="(b<=0?0:b)"></option>
</select>

看更多先前的討論...收起先前的討論...

froce iT邦大師 1 級 ‧ 2022-10-11 10:21:11 檢舉

先對Num做計算，把0以下的都過濾出來。

nick12345 iT邦新手 4 級 ‧ 2022-10-11 10:33:25 檢舉

Num 的結構是
b是number a是string
1 peter
2 alan
3 ben

我知道是過濾，但不太懂Num在哪個位置去做。

froce iT邦大師 1 級 ‧ 2022-10-11 11:24:58 檢舉

https://vuejs.org/guide/essentials/computed.html

不要在模板做。用計算屬性去做

nick12345 iT邦新手 4 級 ‧ 2022-10-11 13:34:33 檢舉

b是number a是string
1 peter
2 alan
3 ben

我在這邊試，好像不行，這邊沒有(THIS. XXX)
我拿不到確實文字和數字。

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

咪路

iT邦新手 5 級 ‧ 2022-10-12 16:27:34

最佳解答

可以用 v-if 來決定要不要渲染出來。

<template>
    <select ...>
        <option v-for="(b,a) in Num" v-if="b !== 0" ...>
        </option>
    </select>
</template>

或是先過濾 array 裡面得值

<option v-for="v in Num.filter(x=>x!==0)" ...>

但是我個人還是建議整理好資料再放到模板，會比較好維護。

export default {
    data() {
        return {
            Num: [...]
        }
    },
    computed() {
        nums() { return this.Num.filter(x => x!=0); }
    }
}

回應
分享
檢舉

登入發表回應

有隻芫荽

iT邦新手 4 級 ‧ 2022-10-11 22:36:16

是要這種效果嗎? array 裡面的第 0 個 peter 不會顯示出來。
是的話直接寫 v-show='b>0' 應該就可以了

<!DOCTYPE html>
<html lang="en">
<hea
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <select name="test" id="test" v-model="result">
            <option v-for="(item, index) in names" :value="index" v-show="index>0">{{item}}</option>
        </select>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const app = Vue.createApp({
            data(){
                return{
                    names: ['peter', 'leo', 'Angu'],
                    result: ''
                }
            },
        });
        app.mount('#app');
    </script>
</body>
</html>