欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 教育 > 培训 > Vue中常用指令

Vue中常用指令

2025/5/11 11:02:20 来源:https://blog.csdn.net/2302_81083129/article/details/144913322  浏览:    关键词:Vue中常用指令

一、内容渲染指令

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

用法示例:

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

        2.v-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中的变量,简写是:

用法示例

<el-form v-bind:model="dataForm"></el-form>
<el-form :model="dataForm"></el-form>

三、事件绑定指令

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

用法示例:

<button @click="add"></button>

四、双向绑定指令

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

用法示例:

<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才会被渲染出来。

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

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词