Vue-4 条件渲染、列表渲染、class与Style绑定

最新推荐文章于 2024-05-28 11:26:03 发布

Torey_Li

最新推荐文章于 2024-05-28 11:26:03 发布

阅读量319

点赞数

分类专栏： Vue 文章标签：条件渲染列表渲染 class绑定 Style绑定

本文链接：https://blog.csdn.net/Torey_Li/article/details/88015304

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

根据慕课网的课程做的笔记

条件渲染

条件渲染常用指令：

v-if、v-else-if、v-else
v-show
v-for与v-if结合使用
v-for高阶用法
v-if用法示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../scripts/vue.js" type="text/javascript"></script>
</head>
<body>
    <div id="app">
        <div>
            {{msg}}
        </div>
        <hr />
        <div v-if="count>0">
            判断1： count大于0，count的值是：{{count}}
        </div>
        <div v-else-if="count<0&&count>-5">
            判断2： count的值是{{count}},小于0但大于-5
        </div>
        <div v-else>
            判断3：count的值是{{count}}
        </div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                msg: "Hello Vue!!",
                count: 0
            }
        });
    </script>
</body>
</html>

在这里插入图片描述
当在控制台将count的值改变为大于0的值时，则会输出：

v-show

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>
   <script type="text/javascript" src="../scripts/vue.js"></script>
</head>
<body>
   <div id="app">
       {{msg}}
       <hr />
       count={{count}}
       <div v-show="count>0">
           v-show1:count值大于0
       </div>
       <!--v-show="count=<0" 这种写法会报错，正确写法为v-show="count<=0"-->
       <div v-show="count<=0&&count>-5">
           v-show2:count值小于或等于0且大于-5
       </div>
       <div v-show="count<=-5">
           v-show3:count的值小于或等于-5
       </div>
   </div>
   <script type="text/javascript">
       var app = new Vue({
           el: "#app",
           data: {
           msg:"Hello Vue!!",
           count:0
           }
       });
   </script>
</body>
</html>

在这里插入图片描述
v-if与v-show的区别：v-if是删除或者dom元素，v-show是隐藏或者显示dom元素

列表渲染 v-for

v-for循环,v-for与v-if结合使用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="../scripts/vue.js"></script>
</head>
<body>
    <div id="app">
        {{msg}}<hr />
        <div v-for="item in list">
            姓名：{{item.name}},年龄：{{item.age}}
        </div>
        <hr />
        <div v-for="item in list">
            <div v-if="item.age>=30">
                姓名：{{item.name}},年龄：{{item.age}}</div>
        </div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                msg: "Hello Vue!!",
                list: [{ name: "A", age: 20 }, { name: "C", age: 31 }, { name: "B", age: 21 }, { name: "D", age: 35}]
            }
        });
    </script>
</body>
</html>

在这里插入图片描述

Class与Style绑定

Style的绑定
在这里插入图片描述

Class的绑定

Class与Style绑定示例源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="../scripts/vue.js"></script>
</head>
<body>
    <div id="app">
        {{msg}}<hr />
        <div v-for="item in list" v-bind:style="styleMsg">
            姓名：{{item.name}},年龄：{{item.age}}
        </div>
        <hr />
        <div v-for="item in list">
            <div v-if="item.age>=30" :class="['active','add',{'another':item.age==35}]">
                姓名：{{item.name}},年龄：{{item.age}}</div>
        </div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                msg: "Hello Vue!!",
                styleMsg:{color:'red','font-style':'italic','font-weight':900},
                list: [{ name: "A", age: 20 }, { name: "C", age: 31 }, { name: "B", age: 21 }, { name: "D", age: 35}]
            }
        });
    </script>
</body>
</html>

Torey_Li

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-4 条件渲染、列表渲染、class与Style绑定

条件渲染条件渲染常用指令：v-if、v-else-if、v-elsev-showv-for与v-if结合使用v-for高阶用法v-if用法示例：&amp;amp;lt;!DOCTYPE html PUBLIC &amp;quot;-//W3C//DTD XHTML 1.0 Transitional//EN&amp;quot; &amp;quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio
复制链接

扫一扫

专栏目录