vue学习之computed:计算属性的使用示例

àì夳堔傛蜴生んèń 2023-02-24 07:55 17阅读 0赞

**computed计算属性** : 数据依赖项改变之后进行重新计算

**使用示例：** 显示包含检索项关键字的内容项

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
        
     <div id="app">
          <div class="panel panel-info">
            <div class="panel-heading">
              <h3 class="panel-title">内容过滤</h3>
            </div>
            <div class="panel-body">
              <input type="text" class="form-control" placeholder="请输入关键内容" v-model="key" />
    
              <ul class="list-group">
                <li class="list-group-item" v-for="(item, index) in filteredList" :key="index" >
                  {
       {item}}
                </li>
              </ul>
            </div>
          </div>
        </div>
        <script src="./libs/vue.js"></script>
        <script> new Vue({ el: "#app", data: { list: ["item 1", "小明", "小红", "大力", "Snake", "二狗子", "张益达"], key: "", }, computed: { filteredList() { //里层方法进行关键字存在项的筛选 //外层将里层筛选出来的项从数组中过滤出来 return this.list.filter((item) => item.indexOf(this.key) > -1); }, }, }); </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70]: /images/20230209/6b4af5059f5a4abb9e357973d876f188.png

发表评论取消回复

表情：

评论列表（有 0 条评论，17人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue学习之computed:计算属性的使用示例

computed计算属性 : 数据依赖项改变之后进行重新计算使用示例：显示包含检索项关键字的内容项 <link rel="stylesheet" href="h

àì夳堔傛蜴生んèń/ 2023年02月24日 07:55/ 0 赞/ 18 阅读

相关 Vue 计算属性 Computed

基础布局 <div id="example"> <p>Original message: "{ { message }}"</p> <p>Co

喜欢ヅ旅行/ 2022年12月05日 10:19/ 0 赞/ 273 阅读

相关 vue计算属性computed

computed属性计算 new Vue({ el:"", data:{ }, methods:{ }, watch:{

谁借莪１个温暖的怀抱￠/ 2022年11月29日 12:15/ 0 赞/ 266 阅读

相关 Vue的Computed计算属性的使用

Vue的Computed计算属性的使用 computed和methods类似 `computed只能调用一次，methods可以调用多次，computed如果没有改变就

阳光穿透心脏的1/2处/ 2022年11月07日 13:29/ 0 赞/ 358 阅读

相关 vue 计算属性 computed 和侦听器 watch 使用示例

vue 计算属性和侦听器 > 完整代码示例：[demo-计算属性-方法-侦听器][demo-_-_-] 计算属性什么是计算属性？ > 本质还是属性，但是它的属

痛定思痛。/ 2022年09月16日 03:51/ 0 赞/ 281 阅读

相关 vue-计算属性computed

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

深藏阁楼爱情的钟/ 2022年07月12日 14:55/ 0 赞/ 290 阅读

相关 Vue中的computed计算属性

文章目录 computed与watch的异同不同点相同点示例源码结果分析 c

旧城等待，/ 2022年04月18日 04:04/ 0 赞/ 353 阅读

相关 vue---computed计算属性的使用

一直以来在使用vue的时候，会对vue的computed属性和watch属性具体的使用分不清楚，总算花点时间整理了下。 computed:通常用于监控自己定义的变量，这个变量

落日映苍穹つ/ 2021年12月16日 07:03/ 0 赞/ 421 阅读

相关 vue中的计算属性computed

目录一，计算属性的基本使用二，计算属性的get与set 三，计算属性与方法的区别 -------------------- Vue计算属性：更强大的属性声明

Bertha 。/ 2021年07月25日 13:36/ 0 赞/ 577 阅读

相关 vue计算属性computed(简单使用)

vue计算属性computed(简单使用) <!DOCTYPE html> <html lang="en"> <head>

心已赠人/ 2021年07月25日 02:12/ 0 赞/ 509 阅读