Vuejs样式绑定和列表渲染五

最新推荐文章于 2024-06-21 16:02:51 发布

米白蓝

最新推荐文章于 2024-06-21 16:02:51 发布

阅读量99

点赞数

分类专栏： Vuejs 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_50563868/article/details/124170055

版权

Vuejs 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<body>
  <div id="root">
    <div class="basic" :class="mood" @click="changeMood">{{msg}}
    </div>
    <br>
    <div class="basic" :class="classArr">{{msg}}</div>
    <br>
    <div class="basic" :class="classObj">{{msg}}</div>
    <br>
    <div class="basic" :style="styleObj">{{msg}}</div>
  </div>
  <script>
    new Vue({
      el: '#root',
      data: {
        msg: '文本设置',
        mood: 'happly',
        classArr: ['style1', 'style2', 'style3'],
        classObj: {
          style1: true,
          style2: true,
          style3: false
        },
        styleObj: {
          color: 'red',
          fontSize:'30px'
        }
      },
      methods: {
        changeMood() {
          this.mood = 'style1 style2 style3'
          let arr = ['happly', 'normal', 'sad']
          let random = Math.floor(Math.random() * 3)
          this.mood = arr[random]

        }
      }
    })
  </script>
</body>

绑定样式：

正常的样式class=“aa”正常写，想要绑定的样式使用vue的v-bind动态绑定，引号里面就写一个变量，动态改变；:class=“变量”;适用于类名不确定，需要动态指定类；
动态绑定一个class数组的形式可以绑定多个样式：适用于，要绑定的样式个数不确定以及名字也不确定；
动态绑定一个class的对象写法，可以给对象里面的样式写true还是false，true就表示有这个样式，false则表示没有这个样式；适用于：绑定的样式个数确定，名字确定，但要动态决定要不用；
内联样式绑定：动态绑定style样式，可以绑定一个对象，在vue中定义对象；但是key值就是样式属性名，有-的要改为驼峰写法；

<body>
  <div id="root">
    <h2 v-show="true">欢饮来到{{msg}}</h2>
    <h3>点击按钮n自增：{{n}}</h3>
    <button @click="n++">点击</button>
    <span v-if="n===1">花园</span>
    <span v-else-if="n===2">茶树</span>
    <span v-else-if="n===3">将军</span>
    <span v-else>皇帝</span>
    <template v-if="n===1">
      <span>老大</span>
      <span>老二</span>
      <span>老三</span>
    </template>
  </div>
  <script>
    new Vue({
      el: '#root',
      data: {
        msg: 'word',
        n: 0
      }
    })
  </script>
</body>

条件渲染：

v-show：表达式true或者false，条件渲染该标签是否存在；节点是存在的；变化频繁使用这个；
v-if：条件渲染该标签是否存在；节点直接不在了；变化不频繁使用这个；
v-else-if：和js的使用形式一样的逻辑；
v-esle：后面不跟条件，跟也不会其效果，表示前面如果判断为false就会显示，为true就不显示，v-if和v-esle之间是不能插入其他没有判断的标签的；v-if要在前面；
要要显示一个一样功能的多个标签，可以通过template标签将他们包裹起来，写在template标签上，该标签不会破坏结构，解析的时候会自动去掉该标签；但是这个标签不能和v-show一起使用，不起效果，只能和v-if；

米白蓝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vuejs样式绑定和列表渲染五

<body> <div id="root"> <div class="basic" :class="mood" @click="changeMood">{{msg}} </div> <br> <div class="basic" :class="classArr">{{msg}}</div> <br> <div class="basic" :class="
复制链接

扫一扫