Vue-常见的标签

常用指令：

1.3.2 v-for

• 作用：列表渲染，遍历容器的元素或者对象的属性

• 语法： v-for = "(item,index) in items"

  • 参数说明：

    • tems 为遍历的数组

    • item 为遍历出来的元素

    • index 为索引/下标，从0开始 ；可以省略，省略index语法： v-for = "item in items"

  • 书写形式：

    <p v-for="content in contents"> {{content}}</p>
    

    遍历的数组，必须在data中定义； 要想让哪个标签循环展示多次，就在哪个标签上使用 v-for 指令。

  • 需求代码：

    <tr v-for="(user,index) in userList">
        <td>{{ index + 1 }}</td>
        <td>{{ user.name }}</td>
        <td> <img src="user.image"> </td>
        <td>{{ user.gender }}</td>
        <td>{{ user.job }}</td>
        <td>{{ user.entrydate }}</td>
        <td>{{ user.updatetime }}</td>
    </tr>
    
    

    效果：

    图片展示问题，后边使用其他指令解决

v-for的key

• 作用：给元素添加的唯一标识，便于vue进行列表项的正确排序复用

• 语法： v-for = "(item,index) in items" :key="唯一值"

• 注意点:

  • key的值只能是字符串 或 数字类型
  • key的值必须具有唯一性
  • 推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）

• 写法：

  <p v-for="content in contents" :key="content.id"> {{content}}</p>
  

  官方推荐在使用 v-for 时提供一个key属性，以遍可以追踪每个节点，提升渲染性能。

1.3.3 v-bind

• 作用：动态为HTML标签绑定属性值，如设置href，src，style样式等。

• 语法：v-bind:属性名="属性值"

• 简化：:属性名="属性值"

• html标签写法

• v-bind写法

v-bind所绑定的数据，必须在data中定义

1.3.4 v-if & v-show

• 作用：这两类指令，都是用来控制元素的显示与隐藏的

• v-if

  • 语法：v-if="表达式"，表达式值为 true，显示；false，隐藏

  • 原理：基于条件判断，来控制创建或移除元素节点（条件渲染）

  • 场景：要么显示，要么不显示，不频繁切换的场景

  • 其它：可以配合 v-else-if / v-else 进行链式调用条件判断

  • 注意：v-else-if必须出现在v-if之后，可以出现多个； v-else 必须出现在v-if/v-else-if之后

  • 示例代码：

    <td v-if="user.gender == 1">男</td>
    <td v-else-if="user.gender == 2">女</td>
    <td v-else>其他</td>
    

• v-show

  • 语法：v-show="表达式"，表达式值为 true，显示；false，隐藏

  • 原理：基于CSS样式display来控制显示与隐藏

  • 场景：频繁切换显示隐藏的场景

  • 示例代码：

    不展示谢逊这条数据

    <tr v-for="(user,index) in userList" v-show="user.name != '谢逊'">
    

1.3.3 v-model

需求：用户列表数据渲染，获取用户输入的条件

搜索栏中当用户点击查询按钮时，需要获取到用户输入的表单数据，并输出出来 。

需要想要实现上面这个功能，就需要使用新的指令，v-model

v-model

• 作用：在表单元素上使用，双向数据绑定。可以方便的 获取 或 设置 表单项数据

• 语法：v-model="变量名"

  v-model 中绑定的变量，必须在data中定义。

1.3.3 v-on

• 作用：为html标签绑定事件（添加时间监听）

• 语法：

  • v-on:事件名="内联语句"

  • v-on:事件名="函数名“

  • 简写为 @事件名="…"

    示例1：

    <div id="app">
      <input type="button" value="点我一下试试" 
    	v-on:click="console.log('试试就试试');">
    </div>
    

    示例2：

    <div id="app">
       <input type="button" value="点我一下试试" v-on:click="handle">
       <input type="button" value="再点我一下试试" @click="handle">
    </div>
    
       const app = createApp({
          data() {
            return {
              name: "Vue"
            }
          },
          methods: {
            handle() {
              console.log('试试就试试');
            }
          },
        }).mount("#app");
    

所有代码集合 `

  <input class="btn" type="button" value="查询" v-on:click="search">
</div>

<table>
  <tr>
    <th>序号</th>
    <th>姓名</th>
    <th>头像</th>
    <th>性别</th>
    <th>职位</th>
    <th>入职时间</th>
    <th>更新时间</th>
  </tr>

  <tr v-for="(user,index) in userList" v-show="user.name!='谢逊'">
    <td>{{index+1}}</td>
    <td>{{user.name}}</td>
    <td> <img v-bind:src="user.image"> </td>
    <!-- <td>{{user.gender == 1 ? '男': '女' }}</td> -->
    <td v-if="user.gender==1" >男</td>
    <td v-else-if ="user.gender==2">女</td>
    <td v-else>其他</td>
    <td>{{user.job}}</td>
    <td>{{user.entrydate}}</td>
    <td>{{user.updatetime}}</td>
  </tr>

</table>