gpt4 book ai didi

javascript - 如何在 Vue Routes 应用程序中动态更改颜色?

转载 作者:行者123 更新时间:2023-11-30 20:35:59 25 4
gpt4 key购买 nike

我正在尝试创建一个 Vue-Routes 应用程序,其中应该可以通过在两个输入字段中写入所选颜色的名称来更改 index.html 中两个 div 的颜色。这有点复杂,因为这是一个路线应用程序。我如何完成这项任务?

完成的应用程序应具有以下功能:Codepen .

index.js(路由)

import ColorPage from '../components/colorPage.js'

const routes = [
{path: '/', component: ColorPage},
];
const router = new VueRouter({
routes

});

var vm = new Vue({
el: '.container',
router,
});

ColorPage.js

const ColorPage = {
props:
['bga', 'bgb'],
data() {
bga: {
backgroundColor: ''
},
bgb: {
backgroundColor: ''
}
},
template: `
<div id="middle">
<label id="colorLabel"><h2>'Change Colors By Typing Their Names:'</h2></label>
</br>
<input type="text" class="colorInput" v-on:input="bga.backgroundColor = $event.target.value" placeholder="here...">
</br>
<input type="text" class="colorInput" v-on:input="bgb.backgroundColor = $event.target.value" placeholder="... and here!">
</div>
`,
};

export default ColorPage

Index.html

<body>
<div class="container" v-bind:style="bga">

<div class="top" v-bind:style="bgb">
<div id="app">
<h1 id="vueHead">Vue routing</h1>
<h2 class="menu">
<router-link to="/">Color</router-link>
<router-link to="/main">Main</router-link>
<router-link to="/settings">Settings</router-link>
<router-link to="/vue">Vue</router-link>
</h2>
</div>
</div>

<router-view></router-view>

</div>
</body>

最佳答案

你还需要在父类中定义bgabgb

const ColorPage = {
props:['bga','bgb'],
template: `
<div id="middle">
<label id="colorLabel"><h2>Change Colors By Typing Their Names:</h2></label>
</br>
<input type="text" class="colorInput" v-model="$parent.bga" placeholder="here...">
</br>
<input type="text" class="colorInput" v-model="$parent.bgb" placeholder="... and here!">
</div>
`
};

const routes = [
{path: '/', component: ColorPage}
];
const router = new VueRouter({
routes

});

var vm = new Vue({
el: '.container',
router,
data:{
bga:'',
bgb:''
}
});
<script type="text/javascript" src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript" src="https://unpkg.com/vue-router@2.7.0/dist/vue-router.js"></script>
<div class="container">
<div v-bind:style="bga">

<div class="top" v-bind:style="'background-color:'+bga+';'">
<div id="app">
<h1 id="vueHead" v-bind:style="'color:'+bgb+';'">Vue routing</h1>
<h2 class="menu">
<router-link to="/">Color</router-link>
<router-link to="/main">Main</router-link>
<router-link to="/settings">Settings</router-link>
<router-link to="/vue">Vue</router-link>
</h2>
</div>
</div>

<router-view></router-view>

</div>

</div>

另一种方法是通过$parent

const ColorPage = {
data:function(){
return {
bga: this.$parent.bga,
bgb: this.$parent.bgb,
}
},
methods:{
changeBgaColor:function(){
this.$parent.bga = this.bga;
},
changeBgbColor:function(){
this.$parent.bgb = this.bgb;
}
},
template: `
<div id="middle">
<label id="colorLabel"><h2>Change Colors By Typing Their Names:</h2></label>
</br>
<input type="text" class="colorInput" v-on:keyup="changeBgaColor" v-model="bga" placeholder="here...">
</br>
<input type="text" class="colorInput" v-on:keyup="changeBgbColor" v-model="bgb" placeholder="... and here!">
</div>
`
};

const routes = [
{path: '/', component: ColorPage}
];
const router = new VueRouter({
routes

});

var vm = new Vue({
el: '.container',
router,
data:{
bga:'',
bgb:''
}
});
<script type="text/javascript" src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript" src="https://unpkg.com/vue-router@2.7.0/dist/vue-router.js"></script>
<div class="container">
<div v-bind:style="bga">

<div class="top" v-bind:style="'background-color:'+bga+';'">
<div id="app">
<h1 id="vueHead" v-bind:style="'color:'+bgb+';'">Vue routing</h1>
<h2 class="menu">
<router-link to="/">Color</router-link>
<router-link to="/main">Main</router-link>
<router-link to="/settings">Settings</router-link>
<router-link to="/vue">Vue</router-link>
</h2>
</div>
</div>

<router-view></router-view>

</div>

</div>

关于javascript - 如何在 Vue Routes 应用程序中动态更改颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49830097/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com