vue基础 - 05 （元素索引ref / refs、指令directives、计算属性computed、过滤器filters）

1、元素索引

        ref属性：vue提供的，用于把一个变量绑定到元素上

        $refs：存储了所有绑定在ref上的变量

<template>
  <div>
    <!-- 
      元素索引：ref
      ref属性：vue提供的，用于把一个变量绑定到元素上
     -->
     <input type="text" ref="my_input">
     <p ref="my_p">hello Ref:元素索引</p>
     <button ref="my_btn" @click="showRefs">打印</button>
  </div>
</template>

<script>
//refs：存储了所有绑定在ref上的变量
export default {
  methods: {
    showRefs() {
      console.log(this.$refs);
      //变量绑定了DOM元素，就可以调用DOM元素的各种方法
      this.$refs.my_p.innerText="p元素被修改了";
      //让my_input输入框，获取焦点：DOM元素的focus()
      this.$refs.my_input.focus()
    }
  },
};
</script>

2、指令

        directives：本质是为元素自定义属性

directives:{         指令1:{},         指令2:{},         指令3:{}         ... }

        固定属性：inserted  -  代表元素加入到DOM的时机，参数el：指令所在的元素

<template>
  <div>
    <!--  vue提供了v-show控制显示，此处自定义一个v-hidden，希望也能隐藏元素 -->
    <p v-hidden>这里是一段话</p>
    <p v-green>这是绿色的</p>
    <input type="text" />
    <br />
    <input type="text" v-focus />
  </div>
</template>

<script>
export default {
  directives: {
    //v-指令名
    //固定属性：inserted  -  代表元素加入到DOM的时机，参数el：指令所在的元素
    hidden: {
      inserted(el) {
        console.log("元素已加载到DOM中：", el);
        el.style.display = "none";
      },
    },
    green: {
      inserted(el) {
        el.style.color = "green";
      },
    },
    focus: {
      inserted(el) {
        el.focus();
      },
    },
  },
};
</script>

3、计算属性

        computed：利用已有属性经过计算得到新的值，以{{ }}显示在页面上

<template>
  <div>
    <table border="1">
      <thead>
        <tr>
          <th>序号</th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>总价格</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in products" :key="item.pid">
          <td>{{ index + 1 }}</td>
          <td>{{ item.name }}</td>
          <td>¥{{ item.price }}</td>
          <td>{{ item.count }}</td>
          <td>¥{{ item.count * item.price }}</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="5">最终价格：¥{{ totalPrice }}</td>
        </tr>
      </tfoot>
    </table>
    <p>nums的总和：{{ getSum }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { pid: 1, name: "华为", price: 7999, count: 2 },
        { pid: 2, name: "小米", price: 2599, count: 8 },
        { pid: 3, name: "苹果", price: 9999, count: 5 },
      ],
      nums: [11, 22, 333, 44, 55, 66],
    };
  },
  computed: {
    totalPrice() {
      //遍历数组，把所有商品总价格加总
      let sum = 0;
      this.products.forEach((item) => {
        sum += item.price * item.count;
      });
      return sum;
    },
    getSum() {
      return this.nums.reduce((sum, item) => sum + item, 0);
    },
  },
};
</script>

4、过滤器

        value就是|左侧的值，在这里就是gender

        return的值，就是过滤后的结果

        此处0代表女，1代表男 ：['女','男'][value]，把value当做下标

        {{ gender | sex }}  => 男/女

 filters: {
    //此处0代表女，1代表男 ：['女','男'][value]，把value当做下标
    sex(value) {
      return ["女", "男"][value];
    },
 },

        带参数的过滤器：(value，参数1，参数2)

        可以依次使用多个过滤器

        {{ 1 | sex }}  => 男

        {{ 1 | sex("en") }}  => male

        {{ 0 | sex("en") | upper }} => FAMALE

<template>
  <div>
    <!-- 
      过滤器filter：用于修改{{}}中的值，{{值 | 过滤器}}
       -->
    <ul>
      <li>姓名：{{ emp.name }}</li>
      <li>性别：{{ emp.gender | sex }}</li>
      <li>婚姻：{{ emp.married | marry }}</li>
      <li>年龄：{{ emp.age | age_group }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      emp: { name: "lucy", gender: 0, married: true, age: 27 },
    };
  },
  filters: {
    sex(value) {
      return ["女", "男"][value];
    },
    marry(value) {
      return ["未婚", "已婚"][Number(value)]; //三目运算符
    },
    age_group(value) {
      if (value < 18) {
        return "未成年";
      } else if (value < 26) {
        return "青年";
      } else if (value < 38) {
        return "中年";
      } else {
        return "其他";
      }
    },
  },
};
</script>