vuejs创建新项目--创建页面--v-if--v-for-v-if具有更高的优先级

如果没有下载vue，可以用链接的方法进行体验：

<script src="https://cdn.jsdelivr.net/npm/vue@3.2.2"></script>

安装vue,直接输入命令即可   npm install -g @vue/cli@4.5.13 vue@3.2.2

 注意不要把$符号放在文件内

创建新项目,输入命令

vue init webpack my-project

填写详细信息,如项目名称,作者等即可.

 创建后 直接cd 进入项目 ： cd 项目名字

创建一个页面，需要创建路由和视图，进入路由文件进行修改

修改路由文件后，创建对应的视图文件

 输入命令npm run serve  让项目运行起来

在浏览器输入网址即可看到项目视图对应的页面，如果没有修改视图文件，看到是官方的欢迎页面，并没有太多影响

 同样的，创建对应的视图文件，打开对应的页面，即可，v-for页面是这样的，

 打开浏览器输入网址后，看到的页面是这样的

增加v-if的视图页面，如图：

 打开v-if的网址，看到的页面是这样的：

 对于v-if和v-for的优先级比较，可以看一下：

 进入浏览器打开页面。看到：

在vue3中，当v-if与v-for一起使用时，v-if具有比v-for更高的优先级。也就是说，Vue.js会先执行v-if，再执行v-for。