How to reference json in vue

In Vue development, data is very important, and the use of JSON data format is very common. So, how to reference JSON in Vue?

First of all, it should be clear that JSON itself is not a data format, it is a data exchange format. That is, it can represent a set of data, and this set of data can be of any type. In Vue, we can use JSON to represent data and then access it by reference.

Vue provides a built-in directive called v-bind, which can be used to dynamically bind properties. We can use this directive to reference JSON data. The following is an example to display names in JSON data:

<template>
  <div>
    <h1>{{ person.name }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      person: {
        name: '张三',
        age: 20,
        gender: '男'
      }
    }
  }
}
</script>

In the above code, we create a data object named person and define a property named name in it. The value is Zhang San. In the template, we reference this JSON data through the double curly brace syntax {{ person.name }} to dynamically display the value on the page.

In addition, Vue also provides a built-in instruction called v-for, which can treat JSON data as an array, making it easy to loop through. The following is an example that uses the v-for directive to loop through the names in JSON data:

<template>
  <div>
    <ul>
      <li v-for="person in persons" :key="person.id">
        {{ person.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      persons: [
        { id: 1, name: '张三', age: 20, gender: '男' },
        { id: 2, name: '李四', age: 22, gender: '男' },
        { id: 3, name: '王五', age: 25, gender: '女' }
      ]
    }
  }
}
</script>

In this example, we process the JSON data as an array and use the v-for directive to generate A list containing the names of all people. Different from the previous example, a persons array is used here, which contains all personnel information. We use the v-for directive in the template to loop through each person and use the double curly brace syntax {{ person.name }} to display their name.

In summary, JSON data can be easily referenced in Vue. Whether you are binding properties dynamically or while iterating, just follow the example above. Of course, this is just an introduction to the basic usage of referencing JSON data in Vue. There are many details that need to be paid attention to in actual applications. If you need a deeper understanding of how Vue processes JSON data, you can refer to the Vue official documentation.

The above is the detailed content of How to reference json in vue. For more information, please follow other related articles on the PHP Chinese website!