3.16 蓝桥杯+实验+vue

o_o O

已于 2024-03-16 23:00:26 修改

阅读量1.5k

点赞数 38

文章标签：蓝桥杯前端

于 2024-03-16 22:59:27 首次发布

本文链接：https://blog.csdn.net/qq_61834727/article/details/136772140

版权

本文记录了作者在学习Vue过程中遇到的问题，包括整数划分算法、Vue组件中的属性绑定技巧、布尔值应用、组合式指令、条件渲染、列表渲染、事件处理和数组操作的最佳实践。

摘要由CSDN通过智能技术生成

蓝桥杯

早上想了一个整数划分的题，但是最后还是没做出了。。后面忙着实验了

实验

啊啊啊好折磨啊

vue

属性绑定

v-bind:id="" 可以直接简写为一个冒号 :id=""

<template>
  <div v-bind:id="id_na" v-bind:class="class_na">
    Hello
  </div>
</template>

<script>
  import { ref } from "vue";
  export default {
    data() {
      return {
        class_na: "claa",
        id_na: "idd",
        title_na: "tit"
      }
    }
  }
</script>

布尔值

<button :disabled="able">Button</button>

able: true,

组合式

  <div v-bind="Objectof">
    Good
  </div>

  data() {
    return {
      Objectof: {
        id: "claa",
        class: "idd",
      }
    }
 }

条件渲染

<template>
    <h3>条件</h3>
    <div v-if="flag">kanjian1</div>
    <div v-else>HI</div>
    <div v-if="type === 'A'">A</div>
    <div v-else-if="type === 'B'">B</div>
    <div v-else-if="type === 'C'">C</div>
    <div v-else>not ABC</div>
</template>

<script>
export default {
    data() {
        return {
            flag: false,
            type:"A"
        }
    }
}
</script>

如果需要频繁切换就用v-show，否则就v-if

列表渲染

<template>
    <h3>列表</h3>
    <p v-for="(item,index) in names">{{ item }}-{{ index }}</p>
    <div v-for="item in result">
        <p>{{ item.title }}</p>
    </div>
</template>

<script>

export default {
    data() {
        return {
            names: ["hu", "mo", "lo"],
            result: [{
                "id": 123,
                "title":"nihao",
            },
            {
                "id": 456,
                "title":"hello",    
            },
            {
                "id": 789,
                "title":"see" ,   
            }]
        }
    }
}
</script>

事件处理

内联事件处理器

<template>
    <button @click="count++">Add 1</button>
    <p>Count is : {{ count }}</p>
</template>

<script>
export default {
    data() {
        return {
            count:0,
        }
    }
}

</script>

方法

<template>
    <button @click="addCount">Add 1</button>
    <p>Count is : {{ count }}</p>
</template>

<script>
export default {
    data() {
        return {
            count:0,
        }
    },
    methods: {
        addCount() {
            this.count++
        }
    }
}


</script>

数组变化

<template>
    <button @click="addlist">Add</button>
    <li v-for="(item, index) in names" :key="index">{{ item }}</li>
</template>

<script>
export default {
    data() {
        return {
            names:["hu","wq","lo"]
        }
    },
    methods: {
        addlist() {
            // ui会更新
            //this.names.push("forth")
            // ui 不会更新
           // this.names.concat("forth")
            //除非
            this.names = this.names.concat("forth")
        }
    }
}

</script>