vue中常用的指令

最新推荐文章于 2023-04-18 18:56:41 发布

Firm陈

最新推荐文章于 2023-04-18 18:56:41 发布

阅读量843

点赞数 1

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_42408447/article/details/111109710

版权

本文详细介绍了Vue.js中的常用指令，包括v-model用于双向数据绑定，v-on及其事件修饰符如.stop和.prevent，v-bind动态绑定特性，v-for进行数据迭代，以及v-if/v-else/v-else-if的条件渲染，v-show的显示控制，v-once的单次渲染，v-cloak和v-pre的编译控制，v-html和v-text的内容插入，最后提及了v-loading的加载状态设置。

摘要由CSDN通过智能技术生成

一.vue中的指令

1.v-model

用于表单中数据框和数据的相互绑定
v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它选择Vue实例数据做为具体的值。

<div id="app">
    <input v-model="somebody">
    <p>hello {
   {
   somebody}}</p>
</div>
<script>
    var app = new Vue({
   
        el: '#app',
        data: {
   
            somebody:'小明'
        }
})
</script>

这个例子中直接在浏览器input中输入别的名字，下面的p的内容会直接跟着变。这就是双向数据绑定。

v-model修饰符
（1） .lazy
默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步。

<input v-model.lazy="msg">

<2> .number
自动将用户的输入值转化为数值类型

<input v-model.number="msg">

<3> .trim
自动过滤用户输入的首尾空格

<input v-model.trim="msg">

2.v-on

v-on主要用来监听dom事件，以便执行一些代码块。表达式可以是一个方法名。
简写为：@

<div id="app">
    <button @click="consoleLog"></button>
</div>
<script>
    var app = new Vue({
   
        el: '#app',
        methods:{
   
            consoleLog:function (event) {
   
                console.log(1)
            }
        }
})
</script>

3.v-bind

v-bind用来动态的绑定一个或者多个特性。没有参数时，可以绑定到一个包含键值对的对象。常用于动态绑定class和style。以及href等。
简写为一个冒号 :

（1）对象语法：
//进行类切换的例子

<div id="app">
    <!--当data里面定义的isActive等于true时，is-active这个类才会被添加起作用-->
    <!--当data里面定义的hasError等于true时，text-danger这个类才会被添加起作用-->
    <div :class="{'is-active':isActive, 'text-danger':hasError}"></div>
</div>
<script>
    var app = new Vue({
   
        el: '#app',
        data: {
   
            isActive: true,  
            hasError: false
        }
})