首页 > 其他分享 >vue 的常用指令以及作用 ·

vue 的常用指令以及作用 ·

时间:2022-10-16 19:11:05浏览次数:58  
标签:常用 vue 标签 绑定 ng isred 指令 angular red

1、 v-model 多用于表单元素实现双向数据绑定(同 angular 中的 ng-model)

2、 v-for 格式: v-for="字段名 in(of) 数组 json" 循环数组或 json(同 angular 中的ng-repeat),需要注意从 Vue2 开始取消了$index

3、 v-show 显示内容 (同 angular 中的 ng-show)

4、 v-hide 隐藏内容(同 angular 中的 ng-hide)

5、 v-if 显示与隐藏 (dom 元素的删除添加 同 angular 中的 ng-if 默认值为false)

6、 v-else-if 必须和 v-if 连用

7、 v-else 必须和 v-if 连用 不能单独使用 否则报错 模板编译错误

8、 v-bind 动态绑定 作用: 及时对页面的数据进行更改

9、 v-on:click 给标签绑定函数,可以缩写为@,例如绑定一个点击函数 函数必须写在methods 里面

10、v-text 解析文本

11、v-html 解析 html 标签

12、v-bind:class 三种绑定方法 1、对象型 '{red:isred}' 2、三元型 'isred?"red":"blue"' 3、数组型'[{red:"isred"},{blue:"isblue"}]'

13、v-once 进入页面时 只渲染一次 不在进行渲染

14、v-cloak 防止闪烁

15、v-pre 把标签内部的元素原位输出

标签:常用,vue,标签,绑定,ng,isred,指令,angular,red
From: https://www.cnblogs.com/zhulongxu/p/16796821.html

相关文章

  • Vue脚手架基本配置
    Vue脚手架可以快速生成Vue项目基础的架构。A.安装3.x版本的Vue脚手架:npminstall-g@vue/clivue-V查看版本号基于3.x版本的脚手架创建Vue项目:三种方式1)......
  • vue3 中使用ref获取组件元素
    //父组件<template><Sonref="sonRef"/></div></template><scriptlang='ts'setup>import{ref}from"vue";importSonfrom"../components/son.vue"......
  • vue3组合API中的父子通信
    父传子:父亲发送数据--父组件中使用子组件,在子组件标签上动态传入数据:money="money"儿子接收数据--通过单独的props配置项接收数据props:{money:{type:Number,default:......
  • 【面试题】vue2双向绑定原理:深入响应式原理defineProperty、watcher、get、set
    响应式是什么?Vue最独特的特性之一~就是我们在页面开发时,修改data值的时候,数据、视图页面需要变化的地方变化。主要使用到哪些方法?用 ​​Object.defineProperty给watcher对......
  • salt常用命令 | 16
    ***********模块***********查看模块列表modulesalt'minion'sys.list_modules查看指定module的function用法salt'minion'sys.list_functionsfile查看指定模块的详细用......
  • kingbase(人大金仓)数据库的常用知识点与简单巡检
    KES服务的启停查看服务是否已设为开机自启systemctllist-dependencies|grepkingbase除了使用systemctl和service还可以使用sys_ctl管理KES服务......
  • 前端Vue2-Day52
    Vue组件化编程:非单文件组件:一个文件包含n个组件①定义组件:Vue.extend(options)创建,在options内部不能写el(组件都需要经过vm统一管理和分配),data必须写成函数模式,避免组......
  • vue搭建1
    1.终端运行node -v查看node.js是否安装2.终端运行npm-v查看npm是否安装  3.没有安装需要安装node.js 下载node.js  官网:https://nodejs.org/en/ nod......
  • gitee常用命令
              ————————————————版权声明:本文为CSDN博主「日拱一卒~」的原创文章,遵循CC4.0BY-SA版权协议,转载请附上原文出处链接及本......
  • Vue中 export 和import用法
    一,importimportHelloWorldfrom'./components/HelloWorld.vue'importTheWelcomefrom'./components/TheWelcome.vue'import*asssfrom'./assets/export'imp......