vue day03

vue指令

1. v-html和v-text

<template>
  <div>
    <div v-html="str"> </div>
    <div v-text="str"> </div>
    <!-- 会覆盖插值表达式 -->
    <div v-text="str"> {{str1}}</div>  
  </div>
</template>

<script>
export default {
  data(){
    return {
      str:'<p>我是一个p标签</p>',
      str1:'我是span标签'
    }
  }
}
</script>

• 页面返回的结果
  
  2.v-show和v-if

<template>
  <div>
    <!-- 在标签里面添加display:none -->
    <p v-show="bool">显示或隐藏</p> 
    <!-- 直接删除这个节点 -->
    <!-- 那个满足条件，就显示那个 -->
    <p v-if="bool">创造</p>
    <p v-else>删除</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      bool:true
    }
  }
}
</script>

• 页面返回结果
  

3.v-for

<template>
  <div>
    <ul>
      <!-- 谁循环谁使用V-for -->
      <li v-for="(item,index) in list" :key="index">
        {{item}}-------{{index}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data(){
    return {
      list:['红','绿','蓝']
    }
  }

}
</script>

• 页面返回的结果
  

<template>
  <div>
    <ul>
      <!-- 对数组里面的对象进行循环 -->
      <!-- key里面的值填写原则，有id写id，没id写索引，非重复的数组或字符串 -->
      <li v-for="obj in list" :key="obj.id">
        {{ obj.clolr }}-------{{ obj.id }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { clolr: "红", id: 1 },
        { clolr: "绿", id: 2 },
        { clolr: "蓝", id: 3 },
      ],
    };
  },
};
</script>

页面返回结果

<template>
  <div>
    <ul>
      <!-- 对对象进行循环 -->
      <li v-for="(v,k) in list" :key="v">
        {{ v }}-------{{ k }}
      </li>
      <!-- 对数字进行循环 -->
      <li v-for="i in count" :key="i">
        {{ i }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: {
        red:'红',
        green:'绿',
        blue:'蓝',
      },
      count:5
    };
  },
};
</script>

页面返回结果

4.设置动态样式

<template>
  <div>
    <!-- 设置动态样式 bool为布尔值，正确就添加，不正确就不添加-->
    <p :class="{red:bool}">红色</p>
    <!-- 设置行内样式，第一个是css属性，第二个是相关的值 -->
    <p :style="{color : 'red'}"> 我也是红色</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      bool:true
    }
  }

}
</script>

<style>

</style>

<style>
.red{
  color: red;
}
</style>

页面返回的结果