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使用才会被识别。

相关推荐
Apifox7 分钟前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号952712 分钟前
【JavaScript】十四、轮播图
javascript·css·css3
麦麦大数据30 分钟前
neo4j+django+deepseek知识图谱学习系统对接前后端分离前端vue
vue.js·django·知识图谱·neo4j·deepseek·在线学习系统
树上有只程序猿35 分钟前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼1 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187301 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下1 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox1 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞2 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行2 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox