VUE 데이터를 렌더링하고 목록 루프 조건을 결정

 

1. 데이터 렌더링 {{}} MSG

<템플릿> 
  <DIV ID = "응용 프로그램"> 
    {{MSG}} 
  </ DIV> 
</ 템플릿> 

<script> 
수출 기본 { 
  이름 : '응용 프로그램', 
  데이터 () { 
    반환 { 
      메시지 : '안녕하세요' 
    } 
  } 
} 
</ script> 

<스타일> 

</ 스타일>

 2. 조건 V- IF = " XXX "

<template>
  <div id="app">
    {{msg}}
    <hr>
    <block v-if="state">
      你看到我了
    </block>

  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Hello World',
      state:true
    }
  }
}
</script>

<style>

</style>

 3：列表循环 v-for="(item,index) in list" :key="index"

<template>
  <div id="app">
    {{msg}}
    <hr>
    <block v-if="state">
      你看到我了
    </block>
    <hr/>
    <ol>
      <li v-for="(item,index) in list" :key="index">
        {{item.text}}
      </li>
    </ol>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      msg: "Hello World",
      state: true,
      list: [
        { text: "学习 JavaScript" },
        { text: "学习 Vue" },
        { text: "整个牛项目" }
      ]
    };
  }
};
</script>

<style>
</style>

 最终页面效果：