Vue-常见指令

常用指令：

指令	作用
v-for	列表渲染，遍历容器的元素或者对象的属性
v-bind	为HTML标签绑定属性值，如设置 href , css样式等
v-if/v-else-if/v-else	条件性的渲染某元素，判定为true时渲染,否则不渲染
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-model	在表单元素上创建双向数据绑定
v-on	为HTML标签绑定事件

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");
    

所有代码集合
`

Vue3-案例1

姓名: 性别: 男 女 职位: 讲师 班主任 其他

序号	姓名	头像	性别	职位	入职时间	更新时间
{{index+1}}	{{user.name}}		男	女	其他	{{user.job}}	{{user.entrydate}}	{{user.updatetime}}

`

效果如下：