Vue.js的v-if指令是一個條件渲染指令,可以根據(jù)給定表達式的真假來顯示或隱藏DOM元素。v-if指令可以與v-else一起使用,v-else的作用是當v-if指令的表達式的值為false時,渲染v-else元素。另外,v-if指令還可以與v-else-if指令一起使用,v-else-if的作用是在v-if指令判斷表達式的值為false時,判斷v-else-if指令的表達式。
您已登錄
請先登錄
在上面的代碼示例中,v-if指令會根據(jù)isLogin的值來判斷渲染哪個元素。如果isLogin的值為true,則渲染“您已登錄”的p元素,否則渲染“請先登錄”的p元素。
當前沒有商品
當前有{{count}}件商品
- {{ item }}
在上面的代碼示例中,v-if指令會根據(jù)count的值來判斷渲染哪個元素。如果count的值為0,則渲染“當前沒有商品”的p元素,否則渲染“當前有x件商品”的p元素以及列表數(shù)據(jù)。
優(yōu)秀及格不及格
在上面的代碼示例中,v-if指令和v-else-if指令都是根據(jù)score的值來判斷渲染哪個元素。如果score的值大于等于90,則渲染“優(yōu)秀”的元素,否則如果score的值大于等于60,則渲染“及格”的元素,否則渲染“不及格”的元素。
總的來說,v-if指令是Vue.js中很常用的一個指令,可以根據(jù)給定表達式的真假來控制DOM元素的顯示或隱藏,還可以和其他指令一起使用實現(xiàn)更復雜的操作。