Vue基础-计算属性 watch 条件渲染列表渲染

最新推荐文章于 2023-07-10 23:01:53 发布

狗熊掰棒棒

最新推荐文章于 2023-07-10 23:01:53 发布

阅读量1.1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Ferris_/article/details/103805288

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Vue基础-计算属性 watch 条件渲染列表渲染

计算属性

当模板内的JS表达式复杂到我们难以维护时，我们要引入计算属性
```
<div id="app">
{{text.split('').reverse().join('')}}
</div>
```
对于任何复杂逻辑，都应当使用计算属性

计算属性与method方法的区别

计算属性

包含getter和setter
基于依赖缓存
依赖数据改变=>触发setter和getter=>计算属性改变
可以依赖其他计算属性
可以依赖其他实例数据
methods方法
本质是实例上定义的普通函数，组件重新渲染，就会调用

如何选择：

是否需要缓存，比如遍历大数组和做大量计算，一个数据受到多个数据影响，使用计算属性

Demo

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>计算属性及watch</title>
  <script src="../lesson2/node_modules/vue/dist/vue.min.js"></script>
</head>

<body>
  <div id="app">
    <p>苹果手机单价：<input v-model="price1"> 数量：<input v-model="number1"></p>
    <p>华为手机单价：<input v-model="price2"> 数量：<input v-model="number2"></p>
    <p>锤子手机单价：<input v-model="price3"> 数量：<input v-model="number3"></p>
    <div>直接计算：{{price1 * number1 + price2 * number2 + price3 * number3 }}</div>
    <div>计算属性计算：{{totalPrice}}</div>
    <div>方法计算：{{cacTotalPrice()}}</div>
  </div>
</body>
<script>
  let app = new Vue({
    el: "#app",
    data: {
      price1: '',
      number1: 0,
      price2: '',
      number2: 0,
      price3: '',
      number3: 0,
    },
    computed: {
      totalPrice: function () {
        let { price1, number1, price2, number2, price3, number3 } = this;
        return price1 * number1 + price2 * number2 + price3 * number3
      }
    },
     //监听
    watch: {
      price1: function (newVal, oldVal) {
        console.log(newVal, oldVal);
      },
      appleInfo: {
        handler: function(newVal, oldVal) {
          console.log(newVal, oldVal);
        },
        //是否深度监听
        deep: true,
        //是否以当前的初始值执行handler函数
        immediate: true,
      }
    }，
    methods:{
      cacTotalPrice(){
        let { price1, number1, price2, number2, price3, number3 } = this;
        return price1 * number1 + price2 * number2 + price3 * number3
      }
    }
  })
</script>

</html>

Watch

watch使用场景

一个数据影响多个数据。

    //监听
    watch: {
      price1: function (newVal, oldVal) {
        console.log(newVal, oldVal);
      },
      appleInfo: {
        handler: function(newVal, oldVal) {
          console.log(newVal, oldVal);
        },
        //是否深度监听
        deep: true,
        //是否以当前的初始值执行handler函数
        immediate: true,

      },

    },

computed和watch的区别：

computed的结果会被缓存，除非依赖的响应式属性发生变化才会重新计算，虽然是一个方法，但是被当作一个属性使用，watch是一个对象；他的键是要被观测的值，值是对应的函数，来监听某些特定的数据的变化，来做某些业务操作，可以看作computed和methods的结合体。

条件渲染

v-if，v-else-if，v-else/ v-show

v-if，v-else-if，v-else与JavaScript的条件语句if，else，else if类似；
v-show不管初始条件是什么，元素总是被渲染，并且只是简单地基于CSS进行显示隐藏切换。

v-else-if 要紧跟v-if, v-else 要紧跟v-else-if 或者v-if，表达式为真时当前元素/组件及所有子节点将被渲染，为假时被移除。v-show是显示或者隐藏，不对DOM进行操作。

<div i = "app"
  <div v-if="type === 1">type={{type}}</div>
  <div v-else-if="type === 2">type={{type}}</div>
  <div v-else>type={{type}}</div>
  <div v-show="isShow">{{type}}</div>
</div>

v-if使用场景	v-show使用场景
运行条件较少改变	需要频繁切换（tab切换）
展示带权限列表	展示前台页面数据
可以在template上使用	不可以在template上使用

列表渲染

v-for使用

当需要将一个数组遍历或枚举一个对象循环显示时，就会用到列表渲染指令 v-for。它的表达式需结合in来使用，类似item in items的形式。

  <div id="app">
    <div>
      <ul>
        <li v-for="(item, index) in myList">{{ index + "" + item.name}}</li>
        <li v-for="item in obj">{{item}}</li>
      </ul>
    </div>
  </div>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        myList: [
          {name: 'vue基础课程'},
          {name: 'vue进阶课程'},
          {name: 'vue高级课程'},
          {name: 'vue实战课程'},
          {name: 'vue+webpack课程'},
        ],
        obj:{
          name: "Felix",
          age: 30
        }
      }
    })
  </script>

维护状态

为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每一项提供一个唯一的key。

<div v-for = "item in items" v-bind:key = "item.id">
  <!-- 内容 -->
</div>

注意事项

不推荐同时使用v-if和v-for
列表渲染给每项加上key

表单

文本输入绑定

//单行文本
<input v-model="message" placeholder="输入">
//多行文本
<textarea v-model="message" placeholder="输入">

选择框输入绑定

//单选按钮
<input type="radio" name="radio" value="1" v-model="param">
//复选框
<input type="checkbox" v-model="checkVal" :true-value="trueValue" :false-value="falseValue">
//下拉选择
<select name="" id="" v-model="selected" multiple>
  <option value="">请选择</option>
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
</select>

修饰符
v-model.lazy :

  从input事件中转变为在change事件中同步数据

v-model.number：

  可以将输入转换为Number类型

v-model.trim：

  可以自动过滤输入的首尾空格

Demo

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="../lesson2/node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <div>
      <ul>
        <li v-for="(item, index) in myList" :key = "item.name">{{item.name}}</li>
        <li v-for="item in obj">{{item}}</li>
      </ul>
      <button @click = "addList">添加数据</button>
    </div>
    <input type = 'radio' name = "radio" value = "1" v-model = "param"><label for= "">苹果</label>
    <input type = 'radio' name = "radio" value = "2" v-model = "param"><label for= "">梨</label>
    <p>{{param}}</p>
    <label for="">
      <input type="checkbox" v-model = "checkVal" :true-value = "trueValue" :false-value = "falseValue">
      {{checkVal}}

    </label>
    <select name="" id="" v-model = "selected" multiple>
      <option value="1">A</option>
      <option value="2">B</option>
      <option value="3">C</option>
    </select>
    <p>{{selected}}</p>
  </div>
  <script>
    let app = new Vue({
      el: '#app',
      data: {
        myList: [
          {name: 'vue基础课程'},
          {name: 'vue进阶课程'},
          {name: 'vue高级课程'},
          {name: 'vue实战课程'},
          {name: 'vue+webpack课程'},
        ],
        obj:{
          name: "Felix",
          age: 30
        },
        param: 3,
        checkVal: '',
        trueValue: 1,
        falseValue: 2,
        selected: 1
      },
      methods:{
        addList(){
          var aa = {name: '我的学习'}
          this.myList.unshift(aa);
        }
      }
    })
  </script>
</body>
</html>