Vue中常用指令

一、内容渲染指令

1.v-text:操作纯文本,用于更新标签包含的文本,但是使用不灵活,无法拼接字符串,会覆盖文本,可以简写为{{}},{{}}支持逻辑运算。

用法示例:

javascript 复制代码
//把name对应的值渲染到第一个标签中
<p v-text="name"></p>
<p>{{name}}</p>

2.v-html:用于操作html标签,会将其当html标签解析后输出

html 复制代码
<body>
    <div id="app">
        <p v-html="name"></p>
    </div>
    <script type="text/javascript">
        let app=new Vue({
            el:"#app",
            data:{
                name:"<strong>Zhangsan</strong>"
            }           
        })
    </script>
</body>

二、属性绑定指令

1.v-bind:动态属性绑定,属性值可以是src,title,class,href等,bind的属性对应data中的变量,简写是:

用法示例

html 复制代码
<el-form v-bind:model="dataForm"></el-form>
<el-form :model="dataForm"></el-form>

三、事件绑定指令

1.v-on:可以绑定事件的监听器,简写是@

用法示例:

html 复制代码
<button @click="add"></button>

四、双向绑定指令

1.v-model:通常用于表单的组件绑定,例如input、select等。它用于实现表单组件的双向绑定,表单控制件以外的标签没有用

用法示例:

html 复制代码
<el-form-item label="姓名" prop="name"  }">
      <el-input v-model="dataForm.name"  placeholder="输入姓名" clearable ></el-input>
</el-form-item>

五、条件渲染指令

1.v-show:指令的取值为true/false,分别对应着显示/隐藏。原理:动态为元素添加或移除 display:none样式,来实现元素的显示和隐藏;如果要频繁的切换元素的显示状态,用v-show会更好 。

2.v-if:取值为true/false,控制元素是否需要被渲染(展示)。原理:每次动态创建或移除元素,实现元素的显示和隐藏;如果刚进入页面的时候,某些元素默认不需要被展示,而且后期这个元素很可能也不需要被展示出来,此时v-if性能更好。

3.v-else:和v-if指令搭配使用,没有对应的值,当v-if的值为false时,v-else才会被渲染出来。

html 复制代码
v-if可以单独使用,或者配合v-else指令一起使用:
<div v-if="Math.random()>10">
    随机数大于10
</div>
<div v-else>
    随机数小于10
</div>

注意:v-else指令配合v-if使用才会被识别。

相关推荐
志存高远668 分钟前
Kotlin 的 suspend 关键字
前端
www_pp_20 分钟前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
YuShiYue39 分钟前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
天天扭码1 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛1 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
vvilkim1 小时前
React 与 Vue:两大前端框架的深度对比
vue.js·react.js·前端框架
장숙혜1 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang1 小时前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet
某公司摸鱼前端1 小时前
uniapp 仿企微左边公司切换页
前端·uni-app·企业微信
WKK_1 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app