• vue中绑定class样式和条件渲染

    绑定class样式

    • 字符串写法： 适用于： 样式的类名不确定，需要动态指定

    • 数组写法： 适用于： 要绑定的样式个数不确定，名字也不确定

    • 绑定对象：适用于：要绑定的样式个数确定、名字确定、但动态决定决定用不用

      1. <head>
      2.     .normal{}
      3.     .happy{}
      4.     .sad{}
      5. head>
      6. <body>
      7.     //basic和class都是css修饰，而:class="mood"则是动态的随data中的mood改变而改变
      8.     //字符串写法
      9.     <div class="basic" :class="mood" @click="change">
      10.         {{name}}
      11.     div>
      12.     /*数组写法
      13.     <div class="basic" :class="arr">
      14.         {{name}}
      15.     div>
      16.     */
      17.      /*对象写法
      18.     <div class="basic" :class="classObj">
      19.         {{name}}
      20.     div>
      21.     */
      22. body>
      23. <script>
      24.     new Vue({
      25.         el: "#root",
      26.         data: {
      27.             name: '乡民',
      28.             mood: 'normal',
      29.             //数组字符串
      30.            /*
      31.             arr:['happy','normal','sad']
      32.            */
      33.            /*对象
      34.             classObj:{
      35.                 happy: false,
      36.                 normal: false,
      37.             }
      38.            */
      39.         },
      40.         methods: {
      41.             change: {
      42.                 //下列实现的是让mood随机显示'happy','normal','sad'这三种样式中的其中一个
      43.                 const arr = ['happy','normal','sad']
      44.                 //floor是让其取整，Math.random从0到3，取头不取尾
      45.                 const index = Math.floor(Math.random()*3)
      46.                 this.mood = arr[index]
      47.             }
      48.         }
      49.     })
      50. script>

    • 绑定style

    • 第一种style绑定方法

      1. <body>
      2.     
      3.     {fontSize：size + 'px'}的原型是font-size: 10px,直接用css格式vue不承认
      4.     <div class="basic" :style="{fontSize：size + 'px'}">{{name}}div>
      5. body>
      6. <script>
      7.     const vm = new Vue({
      8.         el:'#root',
      9.         data: {
      10.            size: 40
      11.         }
      12.     })
      13. script>
      14. 第二种style绑定方法
      15.  
      16. <body>
      17.     <div class="basic" :style="fontSize">{{name}}div>
      18. body>
      19. <script>
      20.     const vm = new Vue({
      21.         el:'#root',
      22.         data: {
      23.            fontSize: {
      24.                 fontSize: '40px'
      25.            }
      26.         }
      27.     })
      28. script>

    条件渲染

    • v-show做条件渲染

    • v-show="true"将页面的数据显示，v-show="false"只是用css将数据隐藏起来。也就是display: none;

    • v-if="true"也是将页面数据进行显示，v-if="false" 直接将页面的数据删除

    • v-if与v-else-if要挨着写中间不可添加任何标签,如< div>@ 

      1. <body>
      2.     <div id="root">
      3.         <h2>当前的n值为：{{n}}h2>
      4.         <button :click="n++">点我n+1button>
      5.         /*使用v-show做条件渲染
      6.         <h2 v-show="false">{{name}}h2>
      7.         <h2 v-show="true">{{name}}h2>
      8.         v-if做条件渲染
      9.         <h2 v-if="false">{{name}}h2>
      10.         <h2 v-if="true">{{name}}h2>
      11.         //v-if和v-else-if，当v-if条件成立时，直接跳出v-else-if和v-else判断
      12.         <div v-if="n == 1">{{苹果}}div>
      13.         /*<div>@div>*/
      14.         <div v-else-if="n == 2">{{栗子}}div>
      15.         <div v-else-if="n == 3">{{榴念}}div>
      16.         <div v-else>{{榴念}}div>
      17.         
      18.         */
      19.       
      20.     div>
      21. body>
      22. <script>
      23.     const vm = new Vue({
      24.         el:'#root',
      25.         data: {
      26.           name: 'BOY' 
      27.         }
      28.     })
      29. script>

      • 当重复出现相同的条件时可以用div标签统一实现

      • template标签相对于div标签，template不会影响DOM(页面)的格式

        1. <body>
        2.     <div  v-show="true">
        3.          <div>{{栗子}}div>
        4.          <div>{{榴念}}div>
        5.          <div>{{梨子}}div>
        6.     div>
        7.     /*
        8.     <template v-show="true">
        9.          <div>{{栗子}}div>
        10.          <div>{{榴念}}div>
        11.          <div>{{梨子}}div>
        12.     template>
        13.     */
        14. body>
        15. <script>
        16.     const vm = new Vue({
        17.         el:'#root',
        18.         data: {
        19.           name: 'BOY' 
        20.         }
        21.     })
        22. script>

     

  • 相关阅读:
    服务器技术（二）--Linux进阶应用（2）--Linux用户与权限及CentOS7防火墙firewall
    好的FPGA编码风格（2）--多参考设计软件的语言模板（Language Templates）
    resNet网络简单理解
    Python零基础入门-11 标准库简介 —— 第二部分
    CLion配置libtorch找不到xxx.dll
    WebRTC janus安装编译教程
    javaSE--数据类型(复习)
    亚信科技与中国信通院达成全方位、跨领域战略合作
    Java基础之接口与抽象类区别
    Redis基础一（Redis认识和Redis两种安装方式）
  • 原文地址：https://blog.csdn.net/Yyds12300/article/details/134490459