Vue中的样式绑定

最新推荐文章于 2022-07-11 15:24:32 发布

学习笔记999

最新推荐文章于 2022-07-11 15:24:32 发布

阅读量141

点赞数

分类专栏： Vue.js vuex

本文链接：https://blog.csdn.net/z93701081/article/details/91045868

版权

vuex 同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

Vue.js

19 篇文章 0 订阅

订阅专栏

1 第一种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
<script src="./vue.js"></script>
<style type="text/css">
  .intro {color:blue;}
</style>
</head>
<body>
<div id ="app" :class="{intro: isActive}" @click = handleClick>
  hello world
</div>
<script>
    var app = new Vue({
      el: '#app',
      data : {
        isActive: false
      },
      methods:{
        handleClick: function(){
          console.log(1)
          this.isActive = !this.isActive 
        }
       
      }
    })
</script>
</body>
</html>

2 第二种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
<script src="./vue.js"></script>
<style type="text/css">
  .intro {color:red;}
</style>
</head>
<body>
<div id ="app" :class="[intro]" @click = handleClick>
  hello world
</div>
<script>
    var app = new Vue({
      el: '#app',
      data : {
        intro: ''
      },
      methods:{
        handleClick: function(){
          console.log(1)
          this.intro = this.intro === 'intro' ? '' : 'intro'
        }
       
      }
    })
</script>
</body>
</html>

3 第三种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
<script src="./vue.js"></script>
<style type="text/css">
  .intro {color:red;}
</style>
</head>
<body>
<div id ="app" :style="styleObj" @click = handleClick>
  hello world
</div>
<script>
    var app = new Vue({
      el: '#app',
      data : {
        styleObj: {
          color: "red"
        }
      },
      methods:{
        handleClick: function(){
          console.log(1)
          this.styleObj.color =  this.styleObj.color  === 'blue' ? 'red' :'blue'
        }
       
      }
    })
</script>
</body>
</html>

学习笔记999

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的样式绑定

1 第一种<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue</title><script src="./vue.js"></script><style type="text/cs...
复制链接

扫一扫

专栏目录