Vue 条件渲染（v-if v-show)

v-if

• 写法跟 if else 语法类似
  • v-if=“表达式"
  • v-else-if=“表达式”
  • v-else
• 适用于: 切换频率较低的场景，因为不展示的DOM元素被直接移除
• 注意: v-if 可以和 v-else-if v-else 一起使用，但要求结构不能被打断

v-show

• 写法: v-show=“表达式”
• 适用于: 切换频率较高的场景
• 特点: 不展示的DOM元素未被删除，仅仅是使用样式隐藏掉 display: none

备注： 使用v-if 的时，元素可能无法获取到，而使用v-show 一定可以获取到 template 标签不影响结构，页面html中不会有此标签，但只能配合 v-if ,不能配合 v-show。

<style>
  .basic {
    
    width: 300px;height: 50px;border: 1px solid black;}
  .happy {
    
    border: 3px solid red;background-color: rgba(255, 255, 0, 0.644);
    background: linear-gradient(30deg, yellow, pink, orange, yellow);}
  .sad {
    
    border: 4px dashed rgb(2, 197, 2);background-color: skyblue;}
  .normal {
    
    background-color: #bfa;}
  .atguigu1 {
    
    background-color: yellowgreen;}
  .atguigu2 {
    
    font-size: 20px;text-shadow: 2px 2px 10px red;}
  .atguigu3 {
    
    border-radius: 20px;}
</style>

<div id="root">
  <!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
  <div class="basic" :class="mood" @click="changeMood">{
    
    {
    
    name}}</div><br/><br/>

  <!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
  <div class="basic" :class="classArr">{
    
    {
    
    name}}</div><br/><br/>

  <!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
  <div class="basic" :class="classObj">{
    
    {
    
    name}}</div><br/><br/>

  <!-- 绑定style样式--对象写法 -->
  <div class="basic" :style="styleObj">{
    
    {
    
    name}}</div><br/><br/>

  <!-- 绑定style样式--数组写法 -->
  <div class="basic" :style="styleArr">{
    
    {
    
    name}}</div>
</div>

<script type="text/javascript">
  Vue.config.productionTip = false

  const vm = new Vue({
    
    
    el: '#root',
    data: {
    
    
      name: '尚硅谷',
      mood: 'normal',
      classArr: ['atguigu1', 'atguigu2', 'atguigu3'],
      classObj: {
    
    
        atguigu1: false,
        atguigu2: false,
      },
      styleObj: {
    
    
        fontSize: '40px',
        color: 'red',
      },
      styleObj2: {
    
    
        backgroundColor: 'orange'
      },
      styleArr: [
        {
    
    
          fontSize: '40px',
          color: 'blue',
        },
        {
    
    
          backgroundColor: 'gray'
        }
      ]
    },
    methods: {
    
    
      changeMood() {
    
    
        const arr = ['happy', 'sad', 'normal']
        const index = Math.floor(Math.random() * 3)
        this.mood = arr[index]
      }
    },
  })
</script>