(3)vue模板语法


<>1.全新项目，启动服务

下面这种方式，直接在vscode内部集成的终端内启动

<>2.v-if和v-show的区别

v-if
它们可以设置为true和false
项目结构如下所示

目前就修改了这个目录里面的代码,在这个目录里面写代码

代码如下
<template> <div id="app"> <!-- 这个img标签暂时先不管，删除的话就会报错 所。没有什么影响--> <h1 v-if="
false">hello world</h1> <h1 v-show="false">hello world</h1> </div> </template> <
script> export default { } </script> <style> </style>
运行结果如下

* 通过运行结果可以知道，v-if当设置为false时连标签都没有了，
<>3.v-for的使用

代码
<template> <div id="app"> <p v-if="isLogin">欢迎你,小白</p> <p v-if="!isLogin"><a
href="">请登录</a></p> <!-- 显示列表 不会将数据写死（动态产生数据）--> <ul> <li v-for="(fruit,index)
of fruits" :key="index"> <p>水果名称:{{fruit}}</p> <p>水果序号:{{index}}</p> </li> </ul>
<!-- 将数据显示在一个表格里面 --> <table> <thead> <th>序号</th> <th>姓名</th> <th>年龄</th> </
thead> <tbody> <tr v-for="(v,i) of students" :key="i"> <td>{{i+1}}</td> <td>{
{v.name}}</td> <td>{{v.age}}</td> </tr> </tbody> </table> </div> </template> <
script> export default { data() { return { isLogin:false, fruits:["苹果","香蕉","梨子"
], students:[ {name:"小白",age:12}, {name:"小红",age:23}, {name:"小黑",age:33} ] } },
} </script> <style> </style>

<>4.组件

<>组件的命名规则

组件命令:大写字母开头(建议)驼峰命名比较好

<>创建自己的组件
<template> <div> <WeiWei></WeiWei> </div> </template> <script> // 1.引入组件 import
WeiWeifrom "./components/WeiWei.vue" export default { // 2.注册组件 components:{
WeiWei:WeiWei }, data() { return { } }, } </script> <style> </style>

技术
下载桌面版
GitHub
Microsoft Store
SourceForge
Gitee
百度网盘（提取码：draw）
云服务器优惠
华为云优惠券
京东云优惠券
腾讯云优惠券
阿里云优惠券
Vultr优惠券
站点信息
问题反馈
邮箱：[email protected]
吐槽一下
QQ群：766591547
关注微信
©2020-2025 ioDraw All rights reserved, Privacy Policy