vue常用的指令

今天利用空闲时间为大家分享一下常用的vue指令。

  1. v-model:表单控件元素上创建双向数据绑定
    vue常用的指令_第1张图片
    通过改变input的值可以vue实例的值,进而改变视图的值,相反,改变实例的值同样可以改变输入框的值
    代码示例:
    vue常用的指令_第2张图片效果图:(输入框输入111222,后面会跟着添加111222)
    vue常用的指令_第3张图片

  2. v-text:更新标签的文本内容(和“{{}}”的用法等效)
    代码示例:(v-text和{{}}的显示效果一致)
    vue常用的指令_第4张图片

    *效果展示:*
    

    vue常用的指令_第5张图片

  3. v-html:将html代码以标签的形式展示在试图上(不用v-htm就会以字符串的形式渲染在页面上)
    代码示例:vue常用的指令_第6张图片

效果展示:(从浏览器页面和控制台可以看到,第一个渲染成了h3标签,而第二个是字符串)vue常用的指令_第7张图片
4. v-if/v-show
同:根据条件渲染,值为true则渲染,为false则不渲染
异:前者是通过销毁或创建来渲染页面,后者是通过display:none来进行隐现的(若频繁切换隐现可以优先使用v-show,若v-if和v-for一同使用,后 者优先级高)
代码示例:
vue常用的指令_第8张图片

效果展示:(v-if不会生成标签,而v-show显示表示,只是display的属性为
none)
vue常用的指令_第9张图片
5. v-else:和v-if搭配使用,若v-if的值为false时是会显示v-else的内容
代码示例:
vue常用的指令_第10张图片

效果展示:显示的为v-else内容
vue常用的指令_第11张图片
6. v-for:通过遍历data中的数据实现列表渲染,可以迭代数组,对象,整数。
若项较多可以再加上 :key=””
代码示例:item为数组的每一项,index为每一项的下标
vue常用的指令_第12张图片

效果展示:
vue常用的指令_第13张图片
7. v-bind: 动态绑定DOM元素属性(可以简写为“:”)
例如img标签中src属性前不加v-bind符合就会显示等号后面写死的值,若加上则可以调用到data中的值
vue常用的指令_第14张图片
8. v-on:绑定事件的监听器,可以缩写为“@”(用在普通元素上时,只能监听原生 DOM 事件。 用在自定义元素组件上时,也可以监听子组件触发的自定义事件)
代码如下:
vue常用的指令_第15张图片

效果展示:vue常用的指令_第16张图片
9. v-once:数据只会渲染一次,无论数据如何变化都不会在渲染
代码示例:vue常用的指令_第17张图片

效果展示:双向绑定后,无论输入框的值如何改变,p标签的内容都不会在渲染
vue常用的指令_第18张图片
逆战班哦

你可能感兴趣的:(vue常用的指令)