©2020-2024 ioDraw All rights reserved
<>1. New project , Start service
In the following way , Directly in vscode Internal integrated terminal startup
<>2.v-if and v-show Differences between
v-if
They can be set to true and false
The project structure is as follows
At present, the code in this directory has been modified , Write code in this directory
The code is as follows
<template> <div id="app"> <!-- this img The label is ignored for the time being , If it is deleted, an error will be reported place . No impact --> <h1 v-if="
false">hello world</h1> <h1 v-show="false">hello world</h1> </div> </template> <
script> export default { } </script> <style> </style>
The operation results are as follows
* You can know from the running results ,v-if When set to false I don't even have labels ,
<>3.v-for Use of
code
<template> <div id="app"> <p v-if="isLogin"> Welcome , Xiaobai </p> <p v-if="!isLogin"><a
href=""> Please login </a></p> <!-- Show list Will not write the data to death （ Dynamically generate data ）--> <ul> <li v-for="(fruit,index)
of fruits" :key="index"> <p> Fruit name :{{fruit}}</p> <p> Fruit serial number :{{index}}</p> </li> </ul>
<!-- Display the data in a table --> <table> <thead> <th> Serial number </th> <th> full name </th> <th> Age </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:[" Apple "," Banana "," Pear "
], students:[ {name:" Xiaobai ",age:12}, {name:" Xiaohong ",age:23}, {name:" Xiaohei ",age:33} ] } },
} </script> <style> </style>
<>4. assembly
<> Naming rules for components
Component commands : Start with a capital letter ( proposal ) The name of hump is better
<> Create your own components
<template> <div> <WeiWei></WeiWei> </div> </template> <script> // 1. Import components import
WeiWeifrom "./components/WeiWei.vue" export default { // 2. Register components components:{
WeiWei:WeiWei }, data() { return { } }, } </script> <style> </style>
Technology