Vue中的操作指令

犀渠玉剑良家子，白马金羁侠少年。这篇文章主要讲述Vue中的操作指令相关的知识，希望能为你提供帮助。
指令
v-if

< body>
< div id="root">
< /div>
< script>
// data & methods & computed & watcher
const app = Vue.createApp(
data ()
return
tip: Vue学习第四天,
show: true

,
template: `
< div v-if="show">
tip
< /div>
`
)
const vm = app.mount(#root)
< /script>
< /body>

当??show???为??true??时,控制台显示结果:

文章图片

当??show???为??false??时,控制台显示结果:

文章图片

我们发现??v-if???为??true???时,对应的dom元素是显示的,当为??false??时,dom会消失,我们通过控制台显示结果可以看出。
【Vue中的操作指令】

v-show

< body>
< div id="root">
< /div>
< script>
// data & methods & computed & watcher
const app = Vue.createApp(
data ()
return
tip: Vue学习第四天,
show: true

,
template: `
< div v-show="show">
tip
< /div>
`
)
const vm = app.mount(#root)
< /script>
< /body>

当??show???为??true??时,控制台显示结果:

文章图片

当??show???为??false??时,控制台显示结果:

文章图片

我们发现??v-show???为??true???时,对应的dom元素显示的样式为??display:block???,当为??false???时,对应的dom元素显示的样式为??display:none???,我们通过控制台显示结果可以看出,通过这两个显示我们也能知道??v-show???和??v-if???的区别,??v-if???是控制??dom???的显示和隐藏,??v-show???是控制样式的display为??block???或者??none???,所以当我们如果频繁操作??dom???时,我们更建议使用??v-show??从而来提高性能,如果不涉及频繁操作dom,这两个就差距不大了。

拓展知识除了??v-if???和??v-show???之外,还有??v-else???,但是??v-else???只能和??v-if???在一起使用,而且要上下两行,中间不能隔着别的??div???元素,不然??vue???会报警告,也不能与??v-show??在一起使用

< body>
< div id="root">
< /div>
< script>
// data & methods & computed & watcher
const app = Vue.createApp(
data ()
return
tip: Vue学习第四天,
show: false

,
template: `
< div v-if="show"> tip< /div>
< div v-else> 今天不用学习了< /div>
`
)
const vm = app.mount(#root)
< /script>
< /body>

控制台显示结果如下:

文章图片

当??v-if???为??false???时,就会执行??v-else??的操作,所以控制台会显示对应的字段。
而且还可以使用??v-else-if??,代码如下

< body>
< div id="root">
< /div>
< script>
// data & methods & computed & watcher
const app = Vue.createApp(
data ()
return
tip: Vue学习第四天,
show: false,
showTwo: false

,
template: `
< div v-if="show"> tip< /div>
< div v-else-if="showTwo" > elseif< /div>
< div v-else> else< /div>
`
)
const vm = app.mount(#root)
< /script>
< /body>

当??v-if???和??v-else-if???都不成立,就会显示??v-else??中的内容,控制台显示结果如下：

文章图片

列表循环渲染
v-for循环数组
当我们在vue中想循环数组并展示出来,我们可以使用??v-for??的指令

< body>
< div id="root">
< /div>
< script>
// data & methods & computed & watcher
const app = Vue.createApp(
data ()
return
vueList: [vue, vue2, vue3]

,
template: `
< div v-for="(item, index) in vueList" :key="index"> item -- index< /div>
`
)
const vm = app.mount(#root)
< /script>
< /body>

控制台显示结果：

文章图片

如上面代码中所写,其中的??item???代表的是每一项的值,??index???显示的是对应的下标,但是记住??index???下标是从??0??开始的。
循环对象
下面我们看下循环对象和循环数组的区别？

< body>
< div id="root">
< /div>
< script>
// data & methods & computed & watcher
const app = Vue.createApp(
data ()
return
vueList: [vue, vue2, vue3],
vueObj:
one: vue学习第一天,
two: vue学习第二天,
three: vue学习第三天

,
template: `
< div v-for="(value, key, index) in vueObj" :key="index"> value -- key -- index< /div>
`
)
const vm = app.mount(#root)
< /script>
< /body>