VUE for实例

最新推荐文章于 2025-06-23 17:35:24 发布

dengdengchen

最新推荐文章于 2025-06-23 17:35:24 发布

阅读量216

点赞数

CC 4.0 BY-SA版权

分类专栏：实习前端框架文章标签： vue前端框架

本文链接：https://blog.youkuaiyun.com/dengdengchen/article/details/89949774

实习前端框架专栏收录该内容

18 篇文章

订阅专栏

博客主要围绕Vue前端框架展开，介绍了简单数组添加vetur规则后的两种解决方案，一是更改vetur配置，二是添加特定key；还说明了对象数组和对象的使用，对象数组用法参考简单数组，对象中index相当于字段名，value相当于字段值，且在原基础上加key可编号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.1、简单数组

如果你添加了一个规则：vetur，这个时候有两种解决方案

①更改vetur配置 vscode->首选项->设置->搜索（vetur）

"vetur.validation.template": true,

改成：false

②添加一个key,切记key前面一定要有：如下图所示

完整代码

1.2、对象数组（这个时候就不需要key）

其中的index可以换成其他的名称，大体用法可参考简单数组

具体代码如下：

2、对象（这个时候就不需要key）

index相当于就是对象的字段名

value相当于就是对象的字段值

下图的index就是name和sex，value就是陈等等和女

注：在原有的基础上加上了一个key，即为他们进行了编号

全部代码：

<script src="D:/vue.js"></script>
<template>
  <div id="app">
    这是一个基本的vue应用
    <ul>
      <li>下面是简单数组</li>
      <li v-for ="item in arr":key='item'>
        {{item}}
      </li>
      <li>下面是对象数组</li>
      <li v-for ="index in str":key="index.data">
        {{index.data}}:{{index.wht}}
      </li>
        //<li v-for="(item,index) in str":key="index">{{item.data}}-{{item.wht}}                    
      </li>
      <li>下面是对象</li>
      <li v-for ="(value,item,index) in student":key="item">
        {{index}}.{{item}}:{{value}}
      </li>
    </ul>
    <button @click=getNews()>书籍名称</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      arr:[1,2,3,6],
      str:[
        {
          data:"今天是第二天",
          wht:"天气很好"
        },
        {
          data:"今天是第三天",
          wht:"天气明朗"
        },
      ],
      student:{
        name:"陈等等",
        sex:"女"
      }
    };
  },
  methods: {
    getNews:function(){
      console.log("完成vue的点击事件")
    }
  }
};
</script>

<style>
html,
body {
  width: 100%;
  height: 100%;
}
</style>
<style lang="scss" scoped>
div {
  width: 100%;
  height: 100%;
}
</style>