Vue中常用指令

呜呼~225142025-01-04 20:10

一、内容渲染指令

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