蓝桥杯
早上想了一个整数划分的题,但是最后还是没做出了。。后面忙着实验了
实验
啊啊啊好折磨啊
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>