2021-7-7 VUE动态样式

Vue的动态样式实例1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
  .active{
    border: 2px solid darkred;
    width: 100px;
    height: 100px;
  }
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <input type="button" value="aaa" @click="handle" name="">
   <div :class="{active:vis}"></div> 
</div>

<script>
Vue.config.keyCodes.a=65;
new Vue({
  el: '#app',
  data: {
     vis:false
  },
  methods:{
    handle:function(event){
     this.vis=this.vis?false:true;
     // this.vis=!this.vis;
    }
  }
})
</script>
</body>
</html>
对象实例

 Vue的动态样式实例2

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
  .active{
    border: 2px solid darkred;
    width: 100px;
    height: 100px;
  }
  .new{
    background-color: green;
  }
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <input type="button" value="aaa" @click="handle" name="">
   <div :class="[activeClass,newClass]"></div> 
</div>

<script>
Vue.config.keyCodes.a=65;
new Vue({
  el: '#app',
  data: {
     activeClass:'active',
     newClass:'new'
  },
  methods:{
    handle:function(event){
     this.newClass='';

    }
  }
})
</script>
</body>
</html>
数组实例

 Vue的动态样式实例3

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
  .active{
    border: 2px solid darkred;
    width: 100px;
    height: 100px;
  }
  .new{
    background-color: green;
  }
  .money{
    color: yellow;
  }
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <input type="button" value="aaa" @click="handle" name="">
   <div :class="[activeClass,newClass,{money:isMoney}]">rnm,退钱</div> 
</div>

<script>
Vue.config.keyCodes.a=65;
new Vue({
  el: '#app',
  data: {
     activeClass:'active',
     newClass:'new',
     isMoney:false
  },
  methods:{
    handle:function(event){
     this.isMoney=!this.isMoney;
    }
  }
})
</script>
</body>
</html>
数组加对象组合实例

 Vue的动态样式实例4

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
  .active{
    border: 2px solid darkred;
    width: 100px;
    height: 100px;
  }
  .new{
    background-color: green;
  }
  .money{
    color: yellow;
  }
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <input type="button" value="aaa" @click="handle" name="">
   <div :class="arrClasses">rnm,退钱</div> 
   <div :class="objClasses">rnm,退钱</div> 
</div>

<script>
new Vue({
  el: '#app',
  data: {
     arrClasses:['active','new'],
     objClasses:{
      money:true
     }
  },
  methods:{
    handle:function(event){
     this.arrClasses=[];
     this.objClasses.money=!this.objClasses.money;
    }
  }
})
</script>
</body>
</html>
数组实例

Vue的动态样式实例5

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
  .active{
    border: 2px solid darkred;
    width: 100px;
    height: 100px;
  }
  .new{
    background-color: green;
  }
  .money{
    color: yellow;
  }
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <input type="button" value="aaa" @click="handle" name="">
   <div :class="arrClasses">rnm,退钱</div> 
   <div :class="objClasses">rnm,退钱</div> 
</div>

<script>
new Vue({
  el: '#app',
  data: {
     arrClasses:['active','new'],
     objClasses:{
      money:true
     }
  },
  methods:{
    handle:function(event){
     this.arrClasses=[];
     this.arrClasses.push('active');
     this.arrClasses.push(this.objClasses);
     
    }
  }
})
</script>
</body>
</html>
样式push数组

 如果class和v-bind:class混用，那么两种样式会结合在一起

Vue的Style直接指定样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
   <div :style="{border:borderStyle,width:widthStyle,height:heightStyle}">rnm,退钱</div> 
    <input type="button" value="改变" name="" @click="handle">
</div>

<script>
new Vue({
  el: '#app',
  data: {
    borderStyle:'1px solid red',
    widthStyle:'200px',
    heightStyle:'300px'
  },
  methods:{
    handle:function(event){
    this.borderStyle='1px solid blue';
    }
  }
})
</script>
</body>
</html>
Style样式

 Vue的对象Style直接指定样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
   <div :style="rnmStyle">rnm,退钱</div> 
    <input type="button" value="改变" name="" @click="handle">
</div>

<script>
new Vue({
  el: '#app',
  data: {
    rnmStyle:{
    border:'1px solid red',
    width:'200px',
    height:'300px',
    }
  },
  methods:{
    handle:function(event){
    this.rnmStyle.height='100px';
    }
  }
})
</script>
</body>
</html>
对象Style

 Vue的数组混合对象Style的直接指定样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
   <div :style="[rnmStyle,tuiqianStyle]">rnm,退钱</div> 
    <input type="button" value="改变" name="" @click="handle">
</div>

<script>
new Vue({
  el: '#app',
  data: {
    rnmStyle:{
    border:'1px solid red',
    width:'200px',
    height:'300px',
    },
    tuiqianStyle:{
    width:'100px',
    height:'100px'
    }
  },
  methods:{
    handle:function(event){
    this.rnmStyle.height='100px';
    }
  }
})
</script>
</body>
</html>
数组对象Style

 数组样式后面一个会覆盖前面的样式

posted @ 2021-07-07 15:03  月长生  阅读(98)  评论(0)    收藏  举报