英文:
Element not reacting to the data change - v-if not working
问题
我是新手使用 Vue.js。我有一个代码，当我点击"toggle heading"按钮时，可以切换标题，但我不知道为什么它不起作用。我需要你的帮助。
<script setup>
let show_heading = true;
function toggleHeading() {
show_heading ^= true;
}
</script>
<template>
<h1 v-if="show_heading">Hello world is working</h1>
<button class="btn btn-primary" @click="toggleHeading">Toggle heading</button>
</template>
<style scoped>
</style>
英文:
I am new to vue js. I have a code to toggle the heading when I click the "toggle heading" button. But I don't know why it is not working. I need your help.
<script setup>
let show_heading=true;
function toggleHeading(){
show_heading^=true;
}
</script>
<template>
<h1 v-if="show_heading">Hello world is working</h1>
<button class="btn btn-primary" @click="toggleHeading">Toggle heading</button>
</template>
<style scoped>
</style>
答案1
得分: 1
尝试在脚本设置部分使用以下代码：
import { ref } from 'vue';
const show_heading = ref(true);
function toggleHeading() {
show_heading.value = !show_heading.value;
}
或者你可以阅读这篇文章 https://vuejs.org/guide/essentials/class-and-style.html#binding-html-classes 了解如何进行切换。只需一步步来。
英文:
Try this on script setup part
import { ref } from 'vue';
const show_heading = ref(true);
function toggleHeading() {
show_heading.value = !show_heading.value;
}
Or you can read this https://vuejs.org/guide/essentials/class-and-style.html#binding-html-classes for toggle. Just doing step by step.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论