Vue指令

Vue

学习

发布日期: 2021-03-05

更新日期: 2023-11-25

文章字数: 1.1k

阅读时长: 4 分

阅读次数:

指令基本概念

指令是带有v-前缀的特殊属性

vue.js指令的用途

在表达式的值改变时，将某些行为应用到DOM上

vue.js指令的书写规范

书写位置：任意的HTML元素的开始标签内
注意：一个开始标签内可写入多个指令，使用空格分隔

常见指令

1、v-show指令

作用：控制切换一个元素的显示和隐藏
语法：v-show=表达式
根据表达式结果的真假，确定是否显示当前元素
true表示显示该元素，false表示隐藏该元素

实例：

<div id="box">
<div class="div1" v-show='true'></div>
<!-- v-show=表达式：true显示，false隐藏,默认false -->
</div>
<script>
var vm=new Vue({
    el:'#box',
    data:{
    }
})
</script>

2、v-on指令

作用：为HTML元素绑定事件监听
语法：v-on：事件名称=’函数名称()’
简写：@事件名称=’函数名称()’
注意：函数定义在methods配置项中

实例：

<div id="box1">
<button v-on:click='fn()'>按钮1</button>
<button @click='fn()'>按钮2</button>
<!-- 方法定义： -->
<!-- 位置controller中的methods配置项里 -->
<!-- v-on用来绑定事件监听 -->
<!-- 语法：v-on：事件名称='fn()'
简写：@事件名称='fun()' -->
<div class="div2" v-show='bol'></div>
</div>
<script>
var vm=new Vue({
    el:'#box1',
    data:{
        bol:false
    },
    methods:{
        fn:function(){
            console.log(1);
            console.log(this.bol);
            this.bol=!this.bol;
        }
    }
})
</script>

3、v-model指令

作用：将用户的输入同步在视图上
语法：v-model=变量
注意：v-model指令必须绑定在表单元素上

实例：

<div id="box2">
<!-- v-model双向绑定
语法：v-model='变量'
注意：使用在表单元素上，最常用在type类型为文本上 -->
<h1>{{msg}}</h1>
<input type="text" v-model='msg' placeholder="请输入">
</div>
<script>
var vm=new Vue({
    el:'#box2',
    data:{
        msg:'hello unjianwu'
    }
})
</script>

4、v-for指令

作用：遍历data中的数据，并在页面进行数据展示
语法：v-for=’(item,index) in arr’
itme表示每次遍历得到的元素
index表示item的索引，可选参数

实例：

<div id="box3">
<!-- v-for类似于for循环
语法：v-for='item in arr'
item每次遍历后得到的元素
arr需要遍历的数组
v-for='(item index) in arr'
index下标
item和index名字是随便取的 val i
(参数1，参数2)
参数1：每次遍历后得到的元素（跟他叫什么名字没关系，只跟参数的顺序有关）
参数2：每个元素的下标（跟他叫什么名字没关系，只跟参数的顺序有关）
 -->
<ul>
<!-- 有多少数据就渲染多少个 -->
<li v-for='item in arr'>{{item}}</li>
<li v-for='(item,index) in arr'>{{index+'.'}}{{item}}</li>
</ul>
</div>
<script>
var vm=new Vue({
    el:'#box3',
    data:{
        arr:['睡觉','shopping','coding','LOL']
    }
})
</script>

5、v-bind指令

作用：绑定HTML元素的属性
语法：v-bind：属性名=’表达式’
绑定一个属性：img v-bind:src=’myUrl’/
绑定多个属性：img v-bind=’{src:myUrl,title:msg}’/

实例：

<div id="box4">
<button class="red">按钮变色</button>
<button v-bind:class='{red:false}'>按钮变色</button>
<!-- v-bind属性绑定：
v-bind：class={类名：表达式} -->
<ul>
<li v-for='item in arr'>{{item}}</li>
<li v-for='(item,index) in arr' @click='fn1(index)' v-bind:class='{bj:item.bol}'>{{index+'.'}}{{item.des}}</li>
</ul>
<!-- 需求：点击列表，背景色变为红色 -->
</div>
<script>
var vm=new Vue({
    el:'#box4',
    data:{
        arr:[
        {des:'睡觉',bol:false},
        {des:'打豆豆',bol:false},
        {des:'吃饭',bol:false},
        {des:'打死豆豆',bol:false}
        ]
    },
    methods:{
        fn1:function(index){
            // 通过i知道当前被点击的数据，把被点击的数据的bol值改成true，把其他未被选择的数据的bol改为false
            //先都改成false，然后选中的改为true
            for(var i=0;i<this.arr.length;i++){
                this.arr[i].bol=false;
            }
            this.arr[index].bol=true;
        }
    }
})
</script>