docs: update vue.md (#136)
This commit is contained in:
parent
8a2a3f798f
commit
e096c08a2c
22
docs/vue.md
22
docs/vue.md
@ -422,6 +422,28 @@ export default defineComponent({
|
|||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### 响应式样式
|
||||||
|
|
||||||
|
```js
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
const open = ref(false);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<button @click="open = !open">Toggle</button>
|
||||||
|
<div>Hello Vue!</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scope>
|
||||||
|
div{
|
||||||
|
transition: height 0.1s linear;
|
||||||
|
overflow: hidden;
|
||||||
|
height: v-bind(open ? '30px' : '0px');
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
响应式进阶 —— watch和computed
|
响应式进阶 —— watch和computed
|
||||||
---
|
---
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user