switch开关的使用 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./src/vue.js"></script>
    <script src="./src/index.js"></script>
    <link rel="stylesheet" href="./src/index.css">
    <title>Switch开关的使用</title>
</head>
<body>
    <div id="app">
              <el-switch
              v-model="kg"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="open">
            </el-switch>
    </div>
    
</body>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            kg: true,
        },
        methods: {
            open: function(e) {                
                if (e == true){
                    this.$message.success('开关已打开')
                } else {
                    this.$message.info('开关已关闭')
                }
            }
        }

    })
</script>

</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./src/vue.js"></script>
    <script src="./src/index.js"></script>
    <link rel="stylesheet" href="./src/index.css">
    <title>test</title>
</head>
<body>
    <div id="app">
        <span>背景音乐开关：</span>
        <el-switch
          v-model="value"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="test">
        </el-switch>
        <audio ref="audio" :src="audioUrl" id="audio"></audio>
    </div>
    
</body>
<script>
    var app = new Vue({    
        el:'#app',
        data:{
            value: false,
            audioUrl: './src/bjmp3.mp3'
        },
        methods: {
            test: function(e) {                
                if (e == false) {
                    this.$message.info('背景音乐已关闭')
                    this.$refs.audio.pause();
                }else if(e == true){
                    this.$message.success('背景音乐已打开')
                    this.$refs.audio.play();
                }
            },

    }
})
</script>

</html>

 

posted @ 2021-03-26 00:06  华北业余选手  阅读(75)  评论(0)    收藏  举报