課程
/前端開發
/Vue.js
/vue.js入門基礎
在.vue組件中怎么實現單擊元素后改變該元素的樣式啊
2017-04-12
源自：vue.js入門基礎 1-2
正在回答
style可以動態綁定，樣式class也可以動態綁定。
:style='thisStyle' ?:class="thisClass"
點擊的時候去改thisStyle或者 thisClass
<style type="text/css">
.change{
width: 100px;
height: 100px;
background-color: red;
text-align: center;
line-height: 100px;
font-size: 40px;
color: white;
}
.changs{
width: 200px;
height: 200px;
background-color: blue;
</style>
<body>
? ? ? ? <div id="demo">
? ? ? ? <ones :class='[styles]'></ones>
? ? ? ? <button v-on:click='doIt'>點擊</button>
? ? ? ? </div>
<script type="text/javascript">
? ? ? ? ?var one={
? ? ? ? ? template:'<div>呵呵</div>'
? ? ? ? ?};
? ? ? ? ?new Vue({
? ? ? ? ? el:'#demo',
? ? ? ? ? data:{
? ? ? ? ? isTrue:true,
? ? ? ? ? styles:'change'
? ? ? ? ? },
? ? ? ? ? ? components:{
? ? ? ? ? ? 'ones':one
? ? ? ? ? ? },
? ? ? ? ? ? methods:{
? ? ? ? ? ? doIt:function(){
? ? ? ? ? ? this.styles='changs'
? ? ? ? ? ? }
? ? ? ? ?})
</script>
</body>
思路：元素綁定onclick事件，通過onclick實現變量的賦值，樣式綁定變量即可
舉報
本門為vuejs入門教程，詳細的講解加實戰，可以幫你進入vuejs的大門
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2017-04-12
style可以動態綁定，樣式class也可以動態綁定。
:style='thisStyle' ?:class="thisClass"
點擊的時候去改thisStyle或者 thisClass
2017-06-01
<style type="text/css">
.change{
width: 100px;
height: 100px;
background-color: red;
text-align: center;
line-height: 100px;
font-size: 40px;
color: white;
}
.changs{
width: 200px;
height: 200px;
background-color: blue;
text-align: center;
line-height: 100px;
font-size: 40px;
color: white;
}
</style>
<body>
? ? ? ? <div id="demo">
? ? ? ? <ones :class='[styles]'></ones>
? ? ? ? <button v-on:click='doIt'>點擊</button>
? ? ? ? </div>
<script type="text/javascript">
? ? ? ? ?var one={
? ? ? ? ? template:'<div>呵呵</div>'
? ? ? ? ?};
? ? ? ? ?new Vue({
? ? ? ? ? el:'#demo',
? ? ? ? ? data:{
? ? ? ? ? isTrue:true,
? ? ? ? ? styles:'change'
? ? ? ? ? },
? ? ? ? ? ? components:{
? ? ? ? ? ? 'ones':one
? ? ? ? ? ? },
? ? ? ? ? ? methods:{
? ? ? ? ? ? doIt:function(){
? ? ? ? ? ? this.styles='changs'
? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ?})
</script>
</body>
2017-04-12
思路：元素綁定onclick事件，通過onclick實現變量的賦值，樣式綁定變量即可