vue.js样式绑定02(动态改字体)

简介: vue.js样式绑定02(动态改字体)
<!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>
    <style>
        .myopacity{
            /* 半透明 */
            opacity: 0.5;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- mouseover这个事件会在鼠标移动到h1标签上的时候触发 -->
    <!--  mouseover这个时间会在鼠标从h1标签上移走的时候触发-->
    <!-- <h1 v-bind:class="{myopacity: isActive}" style="cursor: pointer" v-on:mouseover="changeOpacity1()" v-on:mouseout="changeOpacity2()"> 样式绑定的一个实际应用</h1> -->
    <h1 v-bind:style="{opacity: isActive ? '0.5' : '1' , cursor: 'pointer'} " v-on:mouseover="changeOpacity1()" v-on:mouseout="changeOpacity2()">样式绑定的一个实际应用</h1>
</div>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                isActive:true
            },
            methods:{
                changeOpacity1(){
                    // 通过数据isActive来驱动myopacity从class中删除
                    this.isActive = false
            },
                changeOpacity2(){
                    // 通过数据isActive来驱动myopacity从class中
                    this.isActive = true
                }
            }
        })
    </script>
</body>
</html>
目录
打赏
0
0
0
0
1
分享
相关文章
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
低代码可视化教你Vue遍历循环绑定
低代码可视化教你Vue遍历循环绑定
78 0
vue-day03 v-on事件处理,表单输入绑定
文章介绍了Vue.js中事件处理和表单输入绑定的使用。包括v-on指令监听事件、事件处理方法、内联处理器、访问原生DOM事件、事件修饰符、按键修饰符、系统修饰符、exact修饰符和鼠标按钮修饰符。同时,讲解了如何使用v-model实现单行文本、多行文本、复选框和单选按钮的双向数据绑定,并提供了修饰符的使用示例。这些特性使得Vue.js在处理表单输入和事件时更加灵活和方便。
vue-day03 v-on事件处理,表单输入绑定
Vue学习之--------组件自定义事件(绑定、解绑)(2022/8/21)
这篇文章介绍了Vue中组件自定义事件的绑定和解绑方法,通过代码实例详细说明了在父子组件间如何传递数据,包括使用`$emit`触发事件、`$on`和`$off`绑定和解绑事件,以及在实际项目中的应用和调试技巧。
Vue学习之--------组件自定义事件(绑定、解绑)(2022/8/21)
JavaScript 事件的绑定
JavaScript 事件的绑定
116 0
Vue学习之--------绑定样式、条件渲染、v-show和v-if的区别(2022/7/12)
这篇博客文章讲解了Vue中绑定样式和条件渲染的方法,包括类样式绑定的不同写法、`v-show`和`v-if`的条件渲染区别以及它们的使用场景和特点,并通过代码实例和测试效果来展示具体应用。
Vue学习之--------绑定样式、条件渲染、v-show和v-if的区别(2022/7/12)
JavaScript 中的样式切换方法
JavaScript 中的样式切换方法
88 0
使用 JavaScript 的 classList 方法轻松切换样式
使用 JavaScript 的 classList 方法轻松切换样式
115 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问