vue（2）

Nobita
76 阅读3分钟

vue第二天

一、vue概念

1.v-text和v-html

目标：更新DOM对象的innerText/innerHTML

语法:

v-text="Vue数据变量" ，声明变量在data方法里面

注意: 会覆盖插值表达式，会把内容作为文本直接显示，不解析内容

语法:

v-html="Vue数据变量"，声明变量在data方法里面

注意: 会覆盖插值表达式,会解析html标签

<template>
  <div>
    <!-- v-text: 作用，设置标签内容 -->
    <!-- 语法: v-text="变量" -->
    <!-- 变量声明在data方法返回对象里 -->
    <!-- v-text把内容作为文本直接显示，不解析内容 -->
    <h1 v-text="hello"></h1>
    <h1 v-text="helloHTML"></h1>

    <!-- v-html：作用，设置标签内容为HTML -->
    <!-- 语法：v-html="变量" -->
    <!-- 变量声明在data方法返回对象里 -->
    <!-- v-html会解析内容中的html标签 -->
    <h1 v-html="helloHTML"></h1>

    <h1 v-html="hello"></h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hello: "hello world",
      helloHTML: "<button>点我</button>",
    };
  },
};
</script>

<style></style>
2.v-show和（v-if、v-else、v-else-if）

语法: v-show="Vue变量"
v-if="Vue变量" 原理 v-show 用的display:none隐藏 (频繁切换使用) v-if 直接从DOM树上移除 高级 v-else的使用

<template>
  <div>
    <!-- v-show -->
    <!-- 作用：控制标签显示和隐藏 -->
    <!-- v-show语法，v-show="表达式" -->
    <!-- v-show通过控制display: none属性来控制显示隐藏 -->
    <h1 v-show="age >= 18">成年人的快乐</h1>
    <h1 v-show="age < 18">给你一瓶营养快线</h1>

    <h1>v-if</h1>

    <!-- v-if -->
    <!-- 作用：控制标签显示和隐藏 -->
    <!-- v-if语法：v-if="表达式" -->
    <!-- v-if通过控制是否插入标签来显示隐藏 -->
    <h2 v-if="age < 18">给你甜甜圈</h2>
    <h2 v-if="age >= 18">快乐水</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 27,
    };
  },
};
</script>

<style></style>


<template>
  <div>
    <!-- v-if和v-else可以搭配使用 -->
    <!-- v-if和v-else必须是相邻节点 -->
    <h2 v-if="age < 18">给你甜甜圈</h2>
    <h2 v-else>快乐水</h2>

    <!-- v-if可以和多个v-else-if搭配使用，实现多个条件控制 -->
    <!-- 多个条件控制可以使用v-else结尾 -->
    <!-- v-else是可选的 -->
    <input type="text" v-model.number="age" />
    <h2 v-if="age < 18">甜甜圈</h2>
    <h2 v-else-if="age < 60">快乐水</h2>
    <h2 v-else-if="age < 100">脑白金</h2>
    <h2 v-else>冬虫夏草</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 8,
    };
  },
};
</script>

<style></style>
3.折叠面板
<template>
  <div>
    <!-- 第一步，先静后动，先实现静态的效果，把诗的标题、按钮、内容显示出来 -->
    <h1 class="text-center">案例：折叠面板</h1>
    <h2>
      静夜思
      <!-- 第二步，处理动态逻辑，给按钮绑定事件 -->
      <!-- 第五步，设置按钮文案 -->
      <button @click="toggle">{{ show ? "收起" : "展开" }}</button>
    </h2>
    <!-- 第三步，控制内容显示，使用v-show或者v-if -->
    <div v-show="show">
      <p>床前明月光</p>
      <p>疑是地上霜</p>
      <p>举头望明月</p>
      <p>低头思故乡</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
    };
  },
  methods: {
    toggle() {
      // 第四步 在事件内部控制内容显示
      // 使用了取反运算
      this.show = !this.show;
    },
  },
};
</script>

<style>
.text-center {
  text-align: center;
}
</style>
4.vue动态设置class

目标: 用v-bind给标签class设置动态的值**

l 语法 :class="{类名: 布尔值}"

布尔值为true，标签增加类名，为false的时候删除类名

可以控制多个类

5.vue动态设置style

目标: 给标签动态设置style的值

语法 :style="{css属性名: 值}"

样式名如果带横线，改为小驼峰，也可以使用引号

二、品牌管理

1.品牌管理-列表-价格高亮
<tr v-for="item in list" :key="item.id">
    <th scope="row">{{ item.id }}</th>
    <td>{{ item.name }}</td>
    
    // 通过类名 添加价格判断布尔值添加类 实现高亮
    <td :class="{ expensive: item.price > 100 }">{{ item.price }}</td>
    <td>{{ item.time }}</td>
    <td>
       <button type="button" class="btn btn-link">删除</button>
    </td>
</tr>

// 添加高亮部分
<style scoped>
  .expensive {
     color: red;
        }
</style>
2.品牌管理-新增数据
// html部分
<form class="row align-items-center">
      <div class="col-3">
        <input
          type="text"
          class="form-control"
          placeholder="资产名称"
          v-model="productName"
        />
      </div>

      <div class="col-3">
        <input
          type="text"
          class="form-control"
          placeholder="价格"
          v-model="productPrice"
        />
      </div>

      <div class="col-3">
        <button
          type="submit"
          class="btn btn-primary"
          @click.prevent="addProduct"
        >
          添加资产
        </button>
      </div>
</form>

// js部分
  methods: {
    addProduct() {
      if (!this.productName || !this.productPrice) {
        alert("资产名称和价格不能为空");
        return;
      }
      // 第五步，处理空数据情况下的新增逻辑异常
      let id;
      if (this.list.length > 0) {
        id = this.list[this.list.length - 1].id + 1;
      } else {
        id = 100;
      }
      this.list.push({
        id,
        name: this.productName,
        price: this.productPrice,
        time: new Date(),
      });
    }
  },
3.品牌管理-删除
// html部分
<tr v-for="(item, index) in list" :key="item.id">
  <th scope="row">{{ item.id }}</th>
  <td>{{ item.name }}</td>
  <!-- 完成大于100值，实现字体高亮 -->
  <td :class="{ col: item.price > 100 }">{{ item.price }}</td>
  <td>{{ item.time | changeTime }}</td>
  <td>
    <button type="button" class="btn btn-link" @click="deleteProduct(index)"> 删除 </button>
  </td>
</tr> 

// js部分
methods: {
  // 删除
  deleteProduct(index) {
    this.list.splice(index, 1);
  },
},
4.品牌管理-总和、平均数
// html部分
<tr class="bg-light">
   <th scope="row">统计</th>
   <td colspan="2">总价：{{ total }}</td>
   <td colspan="2">均价：{{ pingjun }}</td>
</tr>

// js部分
computed: {
    total() {
      let total = 0;
      this.list.forEach((item) => {
        total += item.price;
      });
      return total;
    },
    pingjun() {
      let pingjun = this.total / this.list.length;
      return Math.round(pingjun);
    },
  },
5.品牌管理-时间格式转化(moment第三方包)
<p>{{ time | datefilter }}</p>

// 局部过滤器
filters: {
    datefilter(time) {
      return moment(time).format("YYYY-MM-DD");
    },
  }

三、 过滤器

1.作用：

转换格式, 过滤器就是一个函数, 传入值返回处理后的值

2.优点：

缓存计算结果，只有依赖项变化才会重新运算

3.用法：

（1）过滤器只能用在, 插值表达式和v-bind动态属性里

（2）Vue中的过滤器场景

①字符串翻转, "输入hello, world", 输出"dlrow ,olleh”

②字母转大写, 输入"hello", 输出"HELLO”

（3）语法:

①全局：Vue.filter("过滤器名", (值) => {return "处理后的值"})

Vue.filter("reversefn", (value) => {
  return value.split("").reverse().join("");
});

②局部：filters: {过滤器名字: (值) => {return "处理后的值"}

<template>
  <div>
    //  过滤器作用：转换数据格式
    商品价格：{{ price | priceFilter }}

    <h2>{{ "hello" | toUpperCase }}</h2>

    //  过滤器能使用在插值表达式和v-bind属性里
    <p :title="'hello vue' | toUpperCase">hello vue</p>
  </div>
</template>

  // 声明在filters内的过滤器只能在当前vue文件使用
  filters: {
    // 过滤器要声明为方法
    // 表达式的值是过滤器的第一个参数
    priceFilter(num) {
      return `${num < 10 ? "0" + num : num}￥`;
    },
    toUpperCase(value) {
      return value.toUpperCase();
    },
  },

四、计算属性computed

1.作用：

一个变量的值, 依赖另外一些数据计算而来的结果

注意**: 计算属性也是vue数据变量, 所以不要和data里重名, 用法和data相同**

2.语法：
// 语法
{{ 变量 }}
// 计算属性:
computed：{ 
  函数（）{
  set(value) {  }
  get() {}
  }
}

<div>
  <p>{{ sum }}={{ a }}+{{ b }}</p>
  a:<input type="text" v-model.number="a" /> <br />
  b:<input type="text" v-model.number="b" />
</div>

export default {
  data() {
    return {
      a: 10,
      b: 20,
    };
  },
  computed: {
    sum() {
      return this.a + this.b;
    },
  },
};
3.案例---全选框
<template>
  <div>
    <p>全选：<input type="checkbox" v-model="isAll" /></p>
    <ul>
      <li v-for="item in list" :key="item.id">
        <input type="checkbox" v-model="item.checked" />{{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: "猪八戒", checked: false },
        { id: 2, name: "悟空", checked: false },
        { id: 3, name: "唐僧", checked: false },
        { id: 4, name: "白龙马", checked: false },
      ],
    };
  },
  computed: {
    isAll: {
      //
      set(value) {
        // value--> true/false
        // console.log(value);
        this.list.forEach((item) => {
          item.checked = value;
        });
      },
      get() {
        let all = true;
        this.list.forEach((item) => {
          if (item.checked === false) {
            all = false;
          }
        });
        return all;
      },
    },
  },
};
</script>

<style></style>

4.案例-反选框

<button @click="btn">反选</button>

<script>
export default {
  // ...其他代码省略
  methods: {
    btn(){
      // 8. 让数组里对象的c属性取反再赋予回去
      this.arr.forEach(obj => obj.c = !obj.c)
    }
  }
};
</script>
avatar
文章
阅读
粉丝