[JavaScript知识库]【Vue】07 绑定样式 条件渲染

1.11. 绑定样式

class样式
● 写法：:class="xxx"，xxx 可以是字符串、数组、对象。
● :style="[a,b]"其中a、b是样式对象。
● :style="{fontSize: xxx}"其中 xxx 是动态值。
○ 字符串写法适用于：类名不确定，要动态获取。
○ 数组写法适用于：要绑定多个样式，个数不确定，名字也不确定。
○ 对象写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。

<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>

1.12. 条件渲染

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

<title>条件渲染</title>
<script type="text/javascript" src="../js/vue.js"></script>

<div id="root">
  <h2>当前的n值是:{{ n }}</h2>
  <button @click="n++">点我n+1</button>

  <!-- 使用v-show做条件渲染 -->
  <!-- <h2 v-show="false">欢迎来到{{name}}</h2> -->
  <!-- <h2 v-show="1 === 1">欢迎来到{{name}}</h2> -->

  <!-- 使用v-if做条件渲染 -->
  <!-- <h2 v-if="false">欢迎来到{{name}}</h2> -->
  <!-- <h2 v-if="1 === 1">欢迎来到{{name}}</h2> -->

  <!-- v-else和v-else-if -->
  <!-- <div v-show="n === 1">Angular</div> -->
  <!-- <div v-show="n === 2">React</div> -->
  <!-- <div v-show="n === 3">Vue</div> -->

  <!-- <div v-if="n === 1">Angular</div> -->
  <!-- <div v-else-if="n === 2">React</div> -->
  <!-- <div v-else-if="n === 3">Vue</div> -->
  <!-- <div v-else>哈哈</div> -->


  <!-- v-if与template的配合使用 -->
  <template v-if="n === 1">
    <h3>你好</h3>
    <h3>尚硅谷</h3>
    <h3>北京</h3>
  </template>

</div>

<script type="text/javascript">
  Vue.config.productionTip = false
  const vm = new Vue({
    el:'#root',
    data:{
      name:'尚硅谷',
      n:0
    }
  })
</script>