web前端按钮打开新图片

Question

######我想做一个像青年大学习那样的页面，点击页面上的开始答题，就能切换到下一张，并且在下一张中可以输入文字

用代码块功能插入代码，请勿粘贴截图

运行结果及报错内容

我的解答思路和尝试过的方法

我想要达到的结果

Answer 1

回答：有挑战性呐，就是这个页面没办法写的那么好看，毕竟得花时间调；简单写了一下之后是这样：
打开新图片，可以通过将元素的src属性进行修改，或者修改哪个元素的背景图片之类的；
实际上那些题目是一些文本框和按钮组成的，不是直接的文字，不然元素也太难控制了；然后对题目进行切换到下一道也非常简单，因为题目是保存为json对象组成的对象里面的，只需要进行下标的移动即可；

至于这个修改背景图片就没写了，可以通过js获取元素的style样式，然后修改即可
代码如下：

<template>
    <div id="app">
        <div class="container">
            <h4>A: {{data[index].A}}</h4>
            <h4>B: {{data[index].B}}</h4>
            <h4>C: {{data[index].C}}</h4>
            <h4>D: {{data[index].D}}</h4>

            <el-button class="next-button" @click="nextQuestion">下一题</el-button>
        </div>
    </div>
</template>

<script>
import { ref } from '@vue/reactivity';
export default {
    name: "App",
    components: {},
    setup(){
        const data = [
            {
                A: '今天天气很好',
                B: '今天心情很好',
                C: '今天运气很好',
                D: '今天胃口很好'
            },
            {
                A: '今天天气非常好',
                B: '今天心情非常好',
                C: '今天运气非常好',
                D: '今天胃口非常好'
            }
        ]
        let index = ref(0)

        function nextQuestion(){
            index.value = (index.value + 1) % data.length
        }

        return {
            data,
            index,
            nextQuestion
        }
    }
};
</script>

<style>
* {
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
}

.container {
    background-image: url('@/static/img/background.png');
    width: 480px;
    height: 600px;
    margin: 20px auto;
    text-align: center;
}

.container h4 {
    font-size: 30px;
    margin-bottom: 60px;
}
.container:first-child {
    padding-top: 100px;
}

.next-button {
    width: 300px;
    height: 70px;
    font-size: 20px;
}
</style>

是采用Vue3+element-ui-plus ，主要是一个按钮，你也可以自己写一个按钮