学习Vue的第二天

一、Vue的指令—— v-text

• 作用：解析文本
• 语法：v-text="vue的数据变量"

<template>
  <div>
    <p v-text="str"></p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      str:'<span>我是一个span标签</span>'
    }
  }
}
// 结果是：<span>我是一个span标签</span>
</script>

<style>

</style>

二、Vue的指令—— v-html

• 作用：解析html标签
• 语法：v-html="vue的数据变量"

<template>
  <div>
    <p v-html="str"></p> 
  </div>
</template>

<script>
export default {
  data () {
    return {
      str:'<span>我是一个span标签</span>'
    }
  }
}
// 结果是：我是一个span标签
</script>

<style>

</style>

三、Vue的指令—— v-show

• 作用：用于标签的显示/隐藏，在需要频繁切换显示和隐藏时使用。
• 值：true的时候显示；false的时候隐藏，相当于display:none。
• 语法：v-show="vue变量"

<template>
  <div>
    <h1 v-show="show">现出了</h1>
    <h1 v-show="hide">现出了1</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      show:true,  // true 表示显示 
      hide:false,  // false 表示隐藏
    }
  }
}
</script>

<style>

</style>

四、Vue的指令—— v-if

• 作用：用于标签的显示和隐藏，可搭配v-else一起使用。
• 值：true的时候显示；false的时候隐藏，相当于从dom树上移除。
• 语法：v-if="vue变量"

<template>
  <div>
    <h1 v-if="ifsh">现出了2</h1>
    <h1 v-if="ifhi">现出了3</h1>
    <hr>
    <p v-if="age > 18">成年了</p>
    <p v-else-if="age = 18">刚成年</p>
    <p v-else>未成年</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      ifsh:true,
      ifhi:false,
      // age:20    // 结果是成年了
      // age:5   // 结果是未成年
      age:18   // 结果是刚成年
    }
  }
}
</script>

<style>

五、Vue的指令—— v-for

• 作用：遍历数据，循环渲染生成；可以遍历数组、对象、数字、字符串。
• 语法1：v-for="(值, 索引) in 目标结构"
• 语法2：v-for="值 in 目标结构"

<template>
  <div>
    <ul>
      <li v-for="(value,index) in arr" :key="index">
        <span>{{value}}</span>-----
        <span>{{index}}</span>
      </li>
    </ul>
    <hr />
    <p v-for="obj in stuArr" :key="obj.id">
      <span>{{obj.id}}</span>------
      <span>{{obj.name}}</span>------
      <span>{{obj.sex}}</span>------
      <span>{{obj.hobby}}</span>
    </p>
    <hr />
  <div v-for="(value,key) in tObj" :key="value">
  <span>{{value}}</span>
  <span>{{key}}</span>
  </div>
  <hr />
  
  <div v-for="num in count" :key="num">{{num}}</div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ["小明", "小欢欢", "大黄"],
      stuArr: [
        {
          id: 1001,
          name: "孙悟空",
          sex: "男",
          hobby: "吃桃子",
        },
        {
          id: 1002,
          name: "猪八戒",
          sex: "男",
          hobby: "背媳妇",
        },
      ],
      tObj: {
        name: "小黑",
        age: 18,
        class: "1期",
      },
      count: 10,
    };
  },
};

</script>

<style>

</style>

• 注意：其实key的中有id就写id，没有就写索引。

六、v-for更新监测

• 可以触发v-for更新的数组方法：

1. push()

2. pop()

3. shift()

4. unshift()

5. splice()

6. sort()

7. reverse()

• 可以触发v-for更新的数组方法：

1. slice()

2. filter()

3. concat()

七、动态class

• 作用：给标签设置动态的css的值
• 语法：:class="{类名: 布尔值}"

<template>
  <div>
    <p :class="{red_str:bool}">动态class</p>
    <p :class="{red_str:bll}">动态class</p>
    <p :class="red_str">动态class</p>
    <p class="red_str">动态class</p>  

  </div>
</template>

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

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

八、动态style

• 作用：给标签设置动态的style的值
• 语法：:style="{css属性: 值}"

<template>
  <div>
    <!-- 动态style语法
      :style="{css属性名: 值}"
     -->
    <p :style="{backgroundColor: colorStr}">动态style</p>
  </div>
</template>

<script>
export default {
  data(){
    return {
      colorStr: 'red'
    }
  }
}
</script>

<style>

</style>

九、vue过滤器

• 作用：用于格式转换。
• 语法1：Vue.filter("过滤器名", (值) => {return "返回处理后的值"})  
• 语法2：filters: {过滤器名字: (值) => {return "返回处理后的值"} 

<template>
  <div>
    <p>原来的样子：{{msg}}</p>
    <p>使用翻转过滤器后：{{msg|reverse('|')}}</p>
    <p :title="msg|toUp|reverse('|')">鼠标长停留</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg:'Hello,word'
    }
  },
  // 局部过滤器，只能在当前vue文件内使用
  filters: {
    toUp(val){
      return val.toUpperCase()
    }
  }
}
</script>

<style>

</style>