vue--常见指令

最新推荐文章于 2023-08-18 16:57:00 发布

空忧

最新推荐文章于 2023-08-18 16:57:00 发布

阅读量261

点赞数

分类专栏： web前端文章标签： vue.js

本文链接：https://blog.csdn.net/qq_44216701/article/details/107753279

版权

web前端专栏收录该内容

54 篇文章 0 订阅

订阅专栏

通常指令（Directives）是指带有v-属性的特殊属性。在Vue给HTML元素增加了自定义属性你，它们都是以"v-"开头了
v-if：根据表达式的真假条件渲染元素

<p v-if="false">kkkk</p>

表示不显示
v-show：根据表达式的真假切换元素的display css属性
也表示不显示，不过是把display:none
在这里插入图片描述

v-else：与编程语言中的else一样
v-if相反

<p v-if="false">kkkk</p>
        <p v-else>llll</p>

在这里插入图片描述
v-for：可循环数组，对象，字符串，数字

 <div id="app">

        <div  v-for="(item,index1) in arr">{{ item }}</div>
        <div  v-for="(item,index1) in str">{{ item }}</div>
        <div  v-for="(item,index1) in obj">{{ item }}</div>
    </div>
    <script>
     var vm=new Vue({
         el:"#app",
         data:{
             name:"张三",
             obj:{
                 age:12,
                 kk:"jj",
                 hdhd:"jk"
             },
             arr:[1,2,3,4,5],
             str:"jkshd"
         }
     })

在这里插入图片描述
v-on：绑定事件监听器。事件类型由参数决定
简写为：@

<button @click="kk()">弹出框</button>
var vm=new Vue({
         el:"#app",
         methods: {
             kk(){
                 alert("kkk")
             }
         }
     })

在这里插入图片描述
v-bind：动态的绑定一个或多个属性，或者一个组件prop到表达式
可以简写：：

 <p :value="name"></p>

在这里插入图片描述
v-model：表单元素或者组件上创建双向绑定

<input type="text" name="" id="" v-model="name">
        {{ name }}

在这里插入图片描述
一边改变，另一半也改变
除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。有的情况下，对普通 DOM 元素进行底层操作，这时候就会用到自定义指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-slice2="cosnt" v-model="cosnt">
        {{ cosnt }}
    </div>
    <script>
        Vue.directive("slice1",(el,bindings,vnode)=>{
            var val=bindings.value.slice(0,5);
            vnode.context[bindings.expression]=val;
        })
        new Vue({
            el:"#app",
            data:{
              cosnt:"asdfghjk"
            },
            directives:{
                focus: {
                    // 指令的定义
                    inserted: function (el) {
                    el.focus()
                    }
                },
                slice:{
                    inserted: function (el,bindings,vnode) {
                        var val=bindings.value.slice(0,5);
                        vnode.context[bindings.expression]=val;
                    }
                    
                },
                slice2:function(el,bindings,vnode){
                    var val=bindings.value.slice(0,5);
                        vnode.context[bindings.expression]=val;
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述
只会显示前五个

空忧

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue--常见指令

通常指令（Directives）是指带有v-属性的特殊属性。在Vue给HTML元素增加了自定义属性你，它们都是以"v-"开头了v-if：根据表达式的真假条件渲染元素<p v-if="false">kkkk</p>表示不显示v-show：根据表达式的真假切换元素的display css属性也表示不显示，不过是把display:nonev-else：与编程语言中的else一样v-if相反<p v-if="false">kkkk</p>
复制链接

扫一扫