分享
是一种美德

Vue常用指令001

Vue.js的指令是指v-开头,作用于html标签,提供一些特殊的特性,当指令被绑定到html元素的时候,指令会为被绑定的元素添加一些特殊的行为,可以将指令看成html的一种属性;

(1)v-text:

数据绑定标签,将vue对象data中的属性绑定给对应的标签作为内容显示出来,类似js的text属性;

(2)v-html:

类似v-text标签,他是将data的属性作为html语法输出,类似js中的innerHtml属性;

(3)v-on:==@ methods:{}

缩写 @
参数:event

给dom添加一个事件监听

计数器实例:

<html>

<head>


<meta charset="utf-8">


<meta name="viewport" content="width=device-width, initial-scale=1.0">


<meta http-equiv="X-UA-Compatible" content="ie=edge">


<title>计数器</title>

</head>

<body>

    <div id="app">
    
        <div>

​            <button @click="sub">-</button>

​            <span>{{num}}</span>

​            <button @click="add">+</button>

​        </div>

​    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>


​    var app = new Vue({

​        el: '#app',

​        data:{

​            num:1

​        },

​        methods:{

​            sub:function(){

​                if(this.num > 0){

​                    this.num--

​                }else{

​                    alert('最小值为0!')

​                }

​            },

​            add:function(){

​                if(this.num < 10){

​                    this.num++

​                }else{

​                    alert('最大值为10!')

​                }

​            },

​        }

​    })

</script>

</body>

</body>

</html>

(4)v-show:

根据表达式的真假来切换所绑定的dom的display属性

(5)v-if and v-else and v-else-if

  • v-if v-if和v-show功能差不多,都是用来控制dom的显隐,用法也一样,只是原理不同,当v-if=”false”时,dom被直接删除掉;为true时,又重新渲染此dom;
  • v-else v-else用来表示v-if=””的else情况
  • v-else-if
综上 if, else, else if,都是用来控制显隐的

v-show 和 v-if 区别:

v-if 删除/添加页面的Dom元素,所v-if 有更高的切换消耗。

v-show切换css的display属性,因此有较高的初始化渲染消耗。

因此:–> 如果需要频繁切换的需求场景v-show比较合适,反之v-if 较好。

(6)v-bind

缩写 :
参数 : attr/Prop (optional)

用于将vue的值绑定给对应dom的属性值

实例 图片切换

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片切换</title>
</head>
<body>
    <div id="mask">
        <div>
            <a href="javascript:void(0)" v-show="index!=0" @click="prev">《</a>
            <a href="javascript:void(0)" v-show="index<imgsrc.length-1" @click="next">》</a>
            <img :src="imgsrc[index]" alt="">
        </div>
    </div>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#mask',
        data:{
            imgsrc:[
                './images/001.png',
                './images/002.png',
                './images/003.png',
                './images/004.png'
            ],
            index:0
        },
        methods:{
            prev:function(){
                this.index--
            },
            next:function(){
                this.index++
            },
        }
    })
</script>
</body>
</body>
</html>
分享按钮
赞(1)
转载请注明来源地址:MN乐享 » Vue常用指令001

评论 抢沙发

评论前必须登录!