Vue ifelse if可以用于根據條件顯示不同的內容。在Vue中,我們可以使用v-if、v-else-if和v-else綁定模板塊,這樣可以根據表達式的值,渲染出相應的模板。下面是一個例子:
<template> <div> <div v-if="age < 18"> <p>你還未成年,不能購買該商品。</p> </div> <div v-else-if="age <= 60"> <p>你已經成年了,可以購買該商品。</p> </div> <div v-else> <p>你已經退休了,不需要購買該商品。</p> </div> </div> </template>
在上面的例子中,如果年齡小于18歲,會顯示“你還未成年,不能購買該商品。”,如果年齡在18歲到60歲之間,會顯示“你已經成年了,可以購買該商品。”,如果年齡大于60歲,會顯示“你已經退休了,不需要購買該商品。”。
同時,我們也可以通過computed計算屬性來實現類似的效果。下面是一個例子:
<template> <div> <p>{{ message }}</p> </div> </template> <script> export default { data() { return { age: 30 } }, computed: { message() { if (this.age < 18) { return "你還未成年,不能購買該商品。"; } else if (this.age <= 60) { return "你已經成年了,可以購買該商品。"; } else { return "你已經退休了,不需要購買該商品。"; } } } } </script>
在上面的例子中,根據年齡的不同,返回不同的信息。這種方法在數據較為簡單的情況下,會顯得更加簡潔。
上一篇vue add太慢