Vue指令--v-if、v-show、v-for

保持敬畏

已于 2023-07-04 14:02:21 修改

阅读量279

点赞数

分类专栏： JavaWeb后端SpringBoot 文章标签： vue.js 前端 javascript

于 2023-07-04 14:02:03 首次发布

本文链接：https://blog.csdn.net/weixin_64939936/article/details/131533260

版权

JavaWeb后端SpringBoot 专栏收录该内容

136 篇文章 7 订阅

订阅专栏

v-if和v-show指令的展示如下：

v-for指令的展示如下：

v-if和v-show指令的展示如下：

v-if指令具有两个配套的指令v-else-if和v-else
进行条件判断来决定是否渲染展示某元素

具体代码展示如下：（代码中的注释值得一看）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue指令</title>
    <!-- 引入Vue.js文件 -->
    <script src="js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 使用v-model绑定数据模型 -->
      这是v-if指令标签的使用:<br />
      年龄<input type="text" v-model="age" />经判断为:
      <!-- 使用v-if指令进行条件判断 -->
      <!-- 如果条件成立,则浏览器只渲染展示对应的标签 -->
      <span v-if="age<=35">年轻人不要太气盛(35及以下)</span>
      <span v-else-if="age>35&&age<60">中年人不要太油腻(35~60)</span>
      <span v-else>老年人不要太啰嗦(60及以上) </span>
      <!-- 上述三个标签通常同时出现,达到根据条件渲染的结果 -->
      <br />
      这是v-show指令标签的使用:
      <br />
      <!-- 如果条件不成立,浏览器依然会渲染，只是会通过display的属性值来控制其不展示 -->
      年龄<input type="text" v-model="age" />经判断为:
      <span v-show="age<=35">年轻人不要太气盛(35及以下)</span>
      <span v-show="age>35&&age<60">中年人不要太油腻(35~60)</span>
      <span v-show="age>=60">老年人不要太啰嗦(60及以上) </span>
    </div>
  </body>
  <script>
    // 定义Vue对象
    new Vue({
      el: "#app",
      //   定义Vue数据模型
      data: {
        age: 20,
      },
      methods: {},
    });
  </script>
</html>

运行结果为：

v-for指令的展示如下：

遍历容器中的元素或者对象的属性，进行列表的渲染

具体代码如下：（代码中的注释可以开一下）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue指令</title>
    <!-- 引入Vue.js文件 -->
    <script src="js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 使用v-model绑定数据模型 -->
      这是v-for指令标签的使用:
      <br />
      <!-- 使用插值表达式将数据模型中的数据进行展示 -->
      <div v-for="(add,index) in address">{{add}},{{index+1}}</div>
      可以省略索引
      <br />
      <div v-for="(add) in address">{{add}}</div>
    </div>
  </body>
  <script>
    // 定义Vue对象
    new Vue({
      el: "#app",
      //   定义Vue数据模型
      data: {
        age: 20,
      },
      methods: {},
    });
  </script>
</html>

具体运行结果如下：