Vue 模板语法、条件语句、循环语句

1. 语法：

<template>
  <div class="home">
    <p>{{name}}</p>                     <!--数据绑定-->
    <p v-once>{{name}}</p>              <!--渲染后不会被改变-->
    <p>{{name ? "ok" : "no"}} </p>      <!--javaScript表达式-->
    <p v-html="html"></p>               <!--输出HTML-->
    <p :class="{class}"></p>            <!--是否使用该类-->
    <p @click="click">点击</p>           <!--点击执行事件-->
    <input type="text" v-model="name">  <!--表单控件双向数据绑定-->
  </div>
</template>
<script>
 export default {
  data() {
    return {
      name: '有趣的二货',
      html: '<p>这里带有HTML标签</p>',
      class: true
    }
  },
  methods: {
    click()  {
      console.log('操作成功')
    }
  }
}
</script>

2. 条件：

<template>
  <div class="home">
    <!--v-if  和 else-if 如JavaScript中if(){}else{}-->
    <p v-if="type == 'A'">A</p>
    <p v-else-if="type == 'B'">B</p>
    <p v-else-if="type == 'C'">C</p>
    <p v-else>Not</p>
    <!--v-show 根据 show 值 true false 展示隐藏-->
    <p v-show="show">Hello!</p>
  </div>
  
</template>
<script>
 export default {
  data() {
    return {
      type: 'C',
      show: true
    }
  }
}
</script>

循环

<template>
  <div id="app">
    <ul>
      <li v-for="(item, index) in list"  :key="index">
        {{ index }} , {{ item.value }}
      </li>
    </ul>
    <!--模版内可以使用template模版占位符进行v-for或v-if等操作
    <template v-for="(item, index) in list"  :key="index">
      <div>{{ index }} . {{ value }}</div>
    </template>
  </div>
</template>
<script>
 export default {
  data() {
    return {
      list: [{
        value: '一'
      }，{
        value: '二'
      },{
        value: '三'
      }]
    }
  }
}
</script>