MENU

Vue篇:常用指令

January 18, 2020 • Read: 192 • Note,Vue


1.v-text指令的作用是:设置标签的内容(textContent)

默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容。

内部支持表达式。

<script src="assets/js/vue.js" type="text/javascript" charset="utf-8"></script>
        <div id="app">
            {{name}}
            {{addr}}
            {{tell}}
        </div>
        <script type="text/javascript">
            var app = new Vue({
                el:"#app",
                data:{
                    name:"乐心湖",
                    addr:"广东深圳",
                    tell:"137222222"
                    
                }
            })
        </script>

2.v-html指令的作用是设置元素的innerHTML

内容中含有html结构会被解析为标签

v-text指令无论内容是什么,只会解析为文本

解析文本时用v-text,需要解析html结构的使用v-html


3.v-show指令的作用是根据表达式的真假切换元素的显示状态

原理是修改元素的display,实现显示隐藏

指令后面的内容,最终都会解析为布尔值

值为true时元素显示,值为false元素隐藏

数据改变之后,对应元素的显示状态会同步更新.


4.v-if 指令的作用是根据表达式的真假切换元素的显示状态

本质是通过操纵dom元素来切换显示状态

表达式的值为true,元素存在于dom树中,为false,从dom树中移除

频繁的切换使用v-show,反之使用v-if,前者切换的消耗小.


5.v-bind指令的作用是为元素绑定属性

完整的写法是v-bind:属性名

简写的话可以直接省略v-bind,只保留 :属性名

需要动态的增删class建议使用对象的方式.


6.v-on指令的作用是为元素绑定事件

事件名不需要写on,指令可以简写为@

绑定的方法定义在methods,方法内部通过this关键字可以访问定义在data中的数据。


7.v-for指令的作用是根据数据生成列表结构

数组经常和v-for结合使用

语法是(item,index)in 数据, item和index可以结合其他指令一起使用

数组长度的更新会同步到页面上,是响应式的.


8.v-model指令的作用是便捷的设置和获取表单元素的值

绑定的数据会和表单元素值相关联,绑定的数据和表单元素的值双向绑定


本站所有未注明转载的文章均为原创,并采用CC BY-NV-SA 4.0 授权协议,转载请注明来源。

Last Modified: June 5, 2020
Archives QR Code
QR Code for this page
Tipping QR Code
Leave a Comment

已有 1 条评论
  1. 加油!