您现在的位置是:首页 >技术交流 >vue3—ref使用网站首页技术交流
vue3—ref使用
简介vue3—ref使用
- 导入ref对象
<script>
import {ref} from 'vue'
</script>
- 声明
2-1 全局使用setup
<script setup>
import {ref} from 'vue'
const count = ref(0)
</script>
2-2 局部使用setup
<script>
import {ref} from 'vue'
export default {
name: 'App',
setup() {
const count = ref(0)
}
}
</script>
- 调用
3-1 全局setup,直接调用
<h1>{{count}}</h1>
<script setup>
import {ref} from 'vue'
const count = ref(0)
</script>
3-2 局部setup,返回变量后,调用
<h1>{{count}}</h1>
<script>
import {ref} from 'vue'
export default {
name: 'App',
setup() {
const count = ref(0)
return { count }
}
}
</script>
- 操作数据
4-1 全局setup
<h1>{{count}}</h1>
<button @click="increase">+1</button>
<script setup>
import {ref} from 'vue'
const count = ref(0)
const increase = () => {
count.value ++
}
</script>
4-2 局部setup
<h1>{{count}}</h1>
<button @click="increase">+1</button>
<script>
import {ref} from 'vue'
export default {
name: 'App',
setup() {
const count = ref(0)
const increase = () => {
count.value ++
}
return { count, increase }
}
}
</script>
总结:
①使用ref的基本步骤
- 通过vue导入指定对象或函数
- 再setup中声明变量(全局和局部)
- 再html页面中调用
② 知识点 - 通过ref生成的变量, 通过 变量名.value = X, 赋值
- 在全局setup中,变量和函数可以直接在html中调用, 局部setup中,变量和函数需要return返回,才能在html中调用
风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。