vue.js自学(D8)

最新推荐文章于 2024-05-08 21:39:38 发布

放屁鮰鱼

最新推荐文章于 2024-05-08 21:39:38 发布

阅读量141

点赞数

分类专栏：笔记 Vue.js

本文链接：https://blog.csdn.net/fangpihuiyu/article/details/104522321

版权

笔记同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

Vue.js

13 篇文章 0 订阅

订阅专栏

v-show

它与v-if的区别是
v-if当条件是false时，根本就不会存在于DOM中，当改为true时，会重新创建一个。
v-show是改变DOM的样式
当使用频率非常高时使用v-show
当使用频率不高时使用v-if，
一般项目中常用v-if。

循环遍历

v-for

遍历数组

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <ul>
      <li v-for="item in names">{{item}}</li>
    </ul>
    <!-- 在遍历的过程中获取索引值 -->
    <ul>
      <li v-for="(item,index) in names">{{index+1}}.{{item}}</li>
    </ul>
  </div>
  <script src="../../js/vue.js"></script>
  <script>
    const app = new Vue({
    el:'#app',
    data:{
      message:'你好啊',
      names:['why','James','Kobe']
    },
    })
  </script>
</body>
</html>

遍历对象

遍历对象的过程中，如果只是获取一个值，那么获取到的是value

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2>{{message}}</h2>
    <ul>
      <li v-for="(value,key) in info">{{key}}-{{value}}</li>
    </ul>
  </div>
  <script src="../../js/vue.js"></script>
  <script>
    const app = new Vue({
    el:'#app',
    data:{
      message:'你好啊',
      info:{
        name:'why',
        age:18,
        height:1.88
      }
    },
    })
  </script>
</body>
</html>