链接: vue中v-if和v-show的区别

<template>
  <div class="ZhiLing">
    <!--    v-html:按照HTML格式进行解析，同时显示对应的内容-->
    <p v-html="a"></p>
    <!--    v-once:元素和组件只渲染一次，后面不需要接表达式-->
    <p>{
    
    {
    
     message }}</p>
    <p v-once>{
    
    {
    
     message }}</p>
    <button @click="message='你好啊'">改变message</button>
    <!--    v-bind:绑定动态的数据，绑定一个或多个属性值；向另一个组件传递props值-->
    <img v-bind:src="url">
    <!--    v-bind语法糖:-->
    <!--    <img :src="url">-->
    <!--    v-on：绑定事件-->
    <p>{
    
    {
    
     age }}</p>
    <!--    <button v-on:click="age++">点击添加</button>-->
    <!--    v-on语法糖@-->
    <button @click="age++">点击添加</button>
    <!--v-for:循环遍历-->
    <div v-for="item in list" :key="item.id">{
    
    {
    
     item.name }}</div>
    <!--    v-if:条件渲染指令-->
    <p v-if="age<18">成年人</p>
    <p v-else>未成年人</p>
    <!--    v-show:条件渲染指令-->
    <p v-show="age<18">成年人</p>
    <!--    v-model:实现表单元素和数据的双向绑定-->
    <input type="text" v-model="message">
  </div>
</template>

<script>
export default {
    
    
  name: "ZhiLing",
  data() {
    
    
    return {
    
    
      a: "<a href='https://www.baidu.com'>百度一下</a>",
      message: "hello world",
      url: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
      age: 16,
      list: [{
    
    id: 1, name: "张三"}, {
    
    id: 2, name: "李四"}, {
    
    id: 3, name: "王五"}]
    }
  },
  mounted() {
    
    
  },
  methods: {
    
    }
}
</script>