Vue中常用指令

发布于:2025-02-11 ⋅ 阅读:(40) ⋅ 点赞:(0)

一、内容渲染指令

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


网站公告

今日签到

点亮在社区的每一天
去签到