赞
踩
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- <script src="../js/vue.js"></script>
- </head>
- <body>
- <div id="app">
- <button :style="isAcive=='按钮1' ? acStyle : ''" @click="clickHandler">按钮1</button>
- <button :style="isAcive=='按钮2' ? acStyle : ''" @click="clickHandler">按钮2</button>
- <button :style="isAcive=='按钮3' ? acStyle : ''" @click="clickHandler">按钮3</button>
- </div>
- <script>
- let vm = new Vue({
- el: '#app',
- data: {
- isAcive: '',
- acStyle: {
- background: 'black',
- color: 'white'
- }
- },
- methods: {
- clickHandler(event) {
- this.isAcive = event.target.innerText
- }
- }
- })
- </script>
- </body>
- </html>
结果
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。