jquery改变css样式和vue改变样式的区别

news/2024/7/11 1:45:17 标签: vue.js, jquery, css

jQuery做的就是操作dom节点，从而去改变css样式；而vue不用操作DOM，只关心数据，是从数据绑定的角度去改变样式的

先来看看jQuery，我用的是vue框架，所以先安装jQuery

npm install jquery

安装好之后，不用在main.js中引入，在想要用的vue文件中引入即可

import $ from 'jquery';

用jQuery改变样式

css"><template>
  <div class="home">
      home
  </div>
</template>

<script>
import $ from 'jquery';
export default {
  name: 'Home',
  data(){
    return{

    }
  },
  mounted(){
    this.changeCss();
  },
  methods:{
    // jQuery获取home节点，改变样式
    changeCss(){
      // 单个样式
      $('.home').css("font-size","40px");
      // 多个样式
      $('.home').css({'color': '#ff0088', 'font-weight': '600', 'text-align': 'center'})
    },
  },
}
</script>

<style scoped>

</style>

看起来用jQuery挺方便的

接下来用vue数据绑定的方式改变css样式

css"><!-- vue数据绑定方式改变css样式 -->
<template>
    <div :class="{'bg': bgClassShow}">
        this is about
    </div>
</template>

<script>
export default {
  data () {
    return {
        bgClassShow: false, // 控制class的显示与否
    }
  },
}
</script>

<style scoped>
    .bg{
        font-size: 40px;
        font-weight: 700;
        color: #ff0088;
        text-align: center;
        margin-top: 30px;
    }
</style>

结果：我将about当成一个组件放在了home里

<template>
  <div class="home">
      home
      <about></about>
  </div>
</template>

<script>
import About from './About.vue';
import $ from 'jquery';
export default {
  name: 'Home',
  components: { About },
  data(){
    return{

    }
  },
  mounted(){
    this.changeCss();
  },
  methods:{
    // jQuery获取home节点，改变样式
    changeCss(){
      // 单个样式
      $('.home').css("font-size","40px");
      // 多个样式
      $('.home').css({'color': '#ff0088', 'font-weight': '600', 'text-align': 'center'})
    },
  },
}
</script>

<style scoped>

</style>