5Vue样式绑定

2020-12-01 22:33:39 阅读：171 来源： 互联网

标签：绑定 styleObj 样式 5Vue color Vue black

通过数据改变样式

点击文字切换颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./vue.js"></script>
    <title>Vue中的样式绑定</title>
</head>
<style>
    .activated{
        color: blueviolet;
    }
</style>
<body>
    <!-- 这个元素有一个class样式，叫做 activated，是否使用activated取决于isActivated-->
    <div id="app"
        @click="handleDivClick"
        :class="{activated:isActivated}"
    >颜色</div>
    
</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            isActivated:false
        },
        methods:{
            handleDivClick:function(){
                this.isActivated=!this.isActivated
            }
        }
    })
</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="./vue.js"></script>
    <title>Vue中的样式绑定</title>
</head>
<style>
    .activated{
        color: red;
    }
</style>
<body>
    <!-- 这个元素有一个class样式，class可以和数组进行绑定，class的样式取决于className的内容，className可以在vue实例中进行赋值或改变-->
    <div id="app"
        @click="handleDivClick"
        :class="[className]"
    >颜色</div>
    
</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            isActivated:false,
            className:""
        },
        methods:{
            handleDivClick:function(){
                this.className=this.className==="activated"?"":"activated";
            }
        }
    })
</script>
</html>

数组中可以有多个值。

点击后=>

也可以对style进行绑定，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./vue.js"></script>
    <title>Vue中的样式绑定</title>
</head>
<body>
    <div id="app"
        @click="handleDivClick"
        :style="styleObj"
    >颜色</div>
    
</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            styleObj:{
                color:'black'
            }
        },
        methods:{
            handleDivClick:function(){
                this.styleObj.color=this.styleObj.color==='black'?'blue':'black';
            }
        }
    })
</script>
</html>

点击后=》

4.style也可以使用数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./vue.js"></script>
    <title>Vue中的样式绑定</title>
</head>
<body>
    <div id="app"
        @click="handleDivClick"
        :style="[styleObj,{fontSize:'20px'}]"
    >颜色</div>
    
</body>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            styleObj:{
                color:'black'
            }
        },
        methods:{
            handleDivClick:function(){
                this.styleObj.color=this.styleObj.color==='black'?'blue':'black';
            }
        }
    })
</script>
</html>

样式绑定有两种方法，1.class ; 2.style。他们都可以通过数据来实现切换，同样也都可以通过数组进行绑定。

标签：绑定,styleObj,样式,5Vue,color,Vue,black
来源： https://www.cnblogs.com/ellen-mylife/p/14071217.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

5Vue样式绑定

通过数据改变样式