Vue-样式绑定

最新推荐文章于 2022-11-03 18:46:31 发布

blag_

最新推荐文章于 2022-11-03 18:46:31 发布

阅读量219

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_64067728/article/details/126629619

版权

本文介绍了Vue中的Style和Class绑定。Style绑定示例展示了如何使用`:style`指令动态设置CSS样式，通过@click事件和data中的方法实现元素的显示与隐藏。Class绑定则通过`:class`指令绑定多个class，实现背景颜色的动态变化。文章详细讲解了@click、methods、data以及CSS驼峰命名法的使用。

摘要由CSDN通过智能技术生成

Style绑定

HTML代码：

    <div id="box">
        <div :style="mystyle">{
  {txt}}</div>
        <button @click="change">打开/隐藏</button>
    </div>

JS代码：

 var vm = new Vue({
            el:"#box",
            data:{
                txt:"hello",
                mystyle:{
                    display:"none",
                    color:"red"
                }
            },
            methods:{
                change(){
                    if(this.mystyle.display=="none"){
                        this.mystyle.display="block"
                        console.log(111)
                    }
                    else if(this.mystyle.display=="block"){
                        this.mystyle.display="none"