(十一)vue定义事件，通过业务逻辑的js给html元素的style,class绑定动态值

1：通过事件获取简单页面元素值和设置页面元素值

html代码:

  {{ msg }}<br />

  <button @click="setmsg()">点击改变msg</button>

  <button @click="getmsg()">获取msg值</button>

  <!-- 动态class绑定单个值，myclass是一个变量名称 -->

  <div :class="myclass"></div>

  <br />

  <button @click="updatecolor()">改变div颜色</button>

 js业务逻辑代码:

export default {

  name: "App",

  data() {

    return {

     msg: "yyyy",//给msg绑定默认值

     myclass: "red",

            };

       },

  methods: {//在呢里面定义js事件

    setmsg() {

      this.msg = "hhhh";

    },

    getmsg() {

      alert(this.msg);

    },

 updatecolor() {

      this.myclass = "blue";

    },

}

2：通过对象动态给class绑定多个值

html代码:

<!--active是定义的class的名称(.active),不是变量名称， isactive为true，active才有效-->

<div :class="{ active: isactive, red: isred }">div1</div>

js业务逻辑代码:

data() {

    return {

      isactive: true,

      isred: false,

}

}

3：通过对象在class后面追加:class

  <div class="red" :class="{ active: isactive }">div2</div>

4：通过数组动态给class绑定多个值 

<!-- redclass是变量 -->

  <div :class="[redclass, activeclass]">di3</div>

js业务逻辑代码:

data() {

    return {

      redclass: "red",

      activeclass: "active",

}

}

 5：通过数组动态给class绑定多个值，并且使用三目运算符号判断当前class是否显示 

 <!--activeclass,isactive 都是变量 -->

  <div :class="[isactive ? activeclass : null, isred ? redclass : null]">

    div4

  </div>

 6：拼接给style绑定多个元素

<div :style="'color:' + redclass + ';font-size:' + fontsizes1 + 'px;'">

    div5

  </div>

js业务逻辑代码:

data() {

    return {

    redclass: "red",

    fontsizes1: "45",

}

}

7：通过对象给style绑定多个元素

   <!-- fontSize必须是js的写法，color是属性名称, redclass是变量名称-->>

  <div :style="{ color: redclass, fontSize: fontsizes1 + 'px' }">div6</div>

8：通过js业务逻辑里面的对象直接给style绑定多个元素 

  <!-- objcolor对象的fontSize必须是js的写法 -->

  <div :style="objcolor">div7</div>

js业务逻辑代码:

data() {

    return {

      objcolor: {

        color: "red",

        fontSize: "45px",

      },

   }

}

9：通过数组给style绑定多个元素

  <!-- objcolor对象的fontSize必须是js的写法 -->

  <div :style="[objcolor, bgjcolor]">div8</div>

  <br />

10：通过对象动态给class绑定多个值得方式实现单行蓝色，双行绿色

html代码:

<ul style="width: 50px">

    <!-- <li v-for="(item, index) in list" :key="index"  :style="[index==0?listredcolor:null,index==1?listbluecolor:null]"> -->

    <!-- <li v-for="(item, index) in list" :key="index"  :class="[index=='0'?listredc:null,index=='1'?listbluec:null]"> -->

    <li v-for="(item, index) in list" :key="index"  :class="{'listred':index%2==0,'listblue':index%2!=0}">

      {{ item }}

    </li>

  </ul>

js业务逻辑代码:

data() {

    return {

      list: ["张三", "李四", "王五"],

      listredc:"listred",

      listbluec:"listblue",

      listredcolor: {

        color: "red",

      },

       listbluecolor: {

        color: "blue",

      },

   }

}

 css定义:

<style>

.red {

  background: red;

  width: 100px;

  height: 100px;

}

.blue {

  background: blue;

  width: 100px;

  height: 100px;

}

.active {

  display: block;

  font-size: 30px;

  color: orange;

}

.listred{

color:red;

}

.listblue{

color:blue;

}

</style>