vue学习—常用指令(二)

最新推荐文章于 2025-03-21 10:40:45 发布
原创 最新推荐文章于 2025-03-21 10:40:45 发布 · 208 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue常用指令

本文介绍Vue.js中v-model指令在不同表单元素的应用，包括修饰符使用及v-bind指令在class和style绑定中的高级技巧。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  1. v-model：-model通常用于表单组件的绑定，例如input，select等。它实现的是表单组件的双向绑定，如果用于表单控件以外标签是没有用的。如代码所示，v-model有三个修饰符:   (1) v-model.lazy在改变这个input输入框里message的值的时候，原始的message值不会发生改变，只有当v-model.lazy这个输入框失去焦点的时候原始的message值才发生相应的改变。在做搜索功能的时候常用到v-model.lazy;   (2) v-model.number，当数据是数字的时候不需要转换就可以直接拿来运算，不需要 onEnter: function () {this.a = this.a + parseInt(this.b); }这种操作;   (3) v-model.trim去掉该条数据前后的空格，也就是说在这个输入框里面的值的前后空格是不生效的。
    <body>
    <h1>v-model </h1>
    <div id="app">
    <p>原始文本：{{message}}</p>
    <h3>文本框{{a}}</h3>
    <p>v-model:
    <input type="text" v-model="message">
    </p>
    <p>v-model.lazy:
    <input type="text" v-model.lazy="message">
    </p>
    <p>v-model.number
    <input type="text" @keyup.enter="onEnter" v-model.number="b">
    </p>
    <p>v-model.trim
    <input type="text" v-model.trim="message">
    </p>
    <hr>
    <h3>文本域</h3>
    <textarea v-model="message" cols="30" rows="10"></textarea>
    <hr>
    <h3>单选框</h3>
    <p>{{xz}}
    <input type="checkbox" v-model="xz">
    </p>
    <hr>
    <h3>多个单选框绑定一个数组</h3>
    <p>
    <input type="checkbox" id="xz1" value="xz1" v-model="xzArray">
    <label for="xz1">xz1</label>
    <br>
    <input type="checkbox" id="xz2" value="xz2" v-model="xzArray">
    <label for="xz2">xz2</label>
    <br>
    <input type="checkbox" id="xz3" value="xz3" v-model="xzArray">
    <label for="xz3">xz3</label>
    <p>{{xzArray}}</p>
    </p>
    <hr>
    <h3>单选按钮</h3>
    <input type="radio" id="one" value="true" v-model="danxuan">
    <label for="one">true</label>
    <br>
    <input type="radio" id="two" value="false" v-model="danxuan">
    <label for="two">false</label>
    <p>{{danxuan}}</p>
    <hr>
    <h3>选择列表</h3>
    <p>
    <select v-model="set">
    <option>A</option>
    <option>B</option>
    <option>C</option>
    </select>
    <p>{{set}}</p>
    <select v-model="rerge" multiple>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    </select>
    <p>{{rerge}}</p>
    </p>
    </div>
    <script>
    var app = new Vue({
    el: "#app",
    data: {
    a: 10,
    b: 0,
    message: "Hello Vue!",
    xz: true,
    xzArray: [],
    danxuan: "",
    set: "",
    rerge: []
    },
    methods: {
    onEnter: function () {
    this.a = this.a + this.b;
    }
    }
    })

    function sortByKey(array, key) {
    return array.sort(function (a, b) {
    var x = a[key];
    var y = b[key];
    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
    });
    }
    </script>
    </body>
  2. v-bind：(1) 绑定class: v-bind:class="{classA:false}"中classA是style里面的class类名，true/false控制那个类名是否起作用;在绑定class时使用数组的话，在使用v-bind:class="[classA,classB]"的同时，data里面要设置classA,classB的值:classA: "classA",classB: "classB"; 绑定class时使用数组的话，在使用v-bind:class="[classA,classB]"的同时，data里面要设置classA,classB的值:classA: "classA",classB: "classB";  (2) 绑定style时，style对象里面键的键值对中，键名是css的属性名，遇到横线链接的如font-size要去掉横线用小驼峰命名，键的值必须是data里面设置的值;style绑定json语句的时候，所用的这个json对象必须是data里面的一个设置css样式的json对象，这个对象里面遇到有横线链接的属性名也要用小驼峰命名;  (3) v-bind:可以缩写为一个冒号;
    <body>
    <h1>v-bind </h1>
    <div id="app">
    <img v-bind:src="imgSrc" width="200" height="200">
    <hr>
    <h3>一.绑定class</h3>
    <div v-bind:class="{classA:true}">1.绑定class中的判断</div>
    <div v-bind:class="[classA,classB]">2.绑定class中使用数组</div>
    <div v-bind:class="[color?classA:classB]">3.绑定class中使用三元表达式判断</div>
    <div v-bind:class="[{classA:color},classB]">4.绑定class中使用判断组合</div>
    <hr>
    <h3>二.绑定style</h3>
    <div v-bind:style="{color:blue,fontSize:font}">style绑定</div>
    <div v-bind:style="fontArry">style绑定json语句</div>
    </div>
    <style>
    .classA {
    color: red;
    }

    .classB {
    font-size: 58px;
    }
    </style>
    <script>
    var app = new Vue({
    el: "#app",
    data: {
    message: "Hello Vue!",
    imgSrc: "../images/01.jpg",
    classA: "classA",
    classB: "classB",
    blue: "blue",
    font: "18px",
    color: true,
    fontArry: {
    color: "green",
    fontSize: "26px",
    fontWeight: "550"
    }
    },
    computed: {

    }
    })
    </script>
    </body>
Vue常用指令
qq_42839746的博客
04-24 4436
Vue常用指令是带有v-前缀的特殊属性，例如v-for、v-if、v-show、v-bind。作用是当表达式的值改变时 ，将其产生的连带影响 ，响应式的作用于DOM。
vue常用命令汇总
观千剑而后识器，操千曲而后晓声。
12-13 736
记不住vue、npm、node常用命令不要紧，收藏起来就可以早点下班回家
vue学习常用命令
最新发布
b1249813239的博客
03-21 221
2、查看pnpm的安装目录。3、运行项目某个页面。
Vue - 常用指令
2302_81312344的博客
12-01 1624
Vue 指令是 Vue.js 的一项核心功能，它们可以在 HTML 模板中以v-开头的特殊属性形式使用，用于将响应式数据绑定到 DOM 元素上或在 DOM 元素上进行一些操作。
Vue2常用指令
actavy的博客
07-15 1402
指令就是带有 v- 前缀 的特殊 属性，不同属性 对应 不同的功能学习不同指令 → 解决不同业务场景需求v-textv-htmlv-showv-ifv-elsev-else-ifv-forv-onv-bindv-modelv-slotv-prev-cloakv-once而我们主要使用的有：v-html、v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-model。
【Vue 学习】常用指令
不谷的博客
02-09 429
【Vue 学习】常用指令
vue基础学习笔记 --- vue常用内置指令总结
MImi_0612的博客
07-13 362
vue常用的内置指令
Vue 学习笔记 —— 常用特性 （二）
2401_85123734的博客
06-18 1043
根据自定义指令，改变颜色自定义指令设置自定义颜色前面定义过的样子就相当于一个全局的自定义命令。因此有全局的定义，就有对应的局部自定义命令的定义。我们直接在 一个 vue 实例当中定义 directives 属性即可。因此我定义了两个方法，分别是聚焦，和颜色改变的方法自定义指令四、计算属性 （computed）
Vue学习教程-14内置指令
记录前端、后端、深度学习、大数据、Linux和无人机学习的过程
02-23 2008
Vue.js 提供了许多内置指令（Directives），这些指令用于在模板中添加特殊功能。内置指令以 v- 前缀开始。v-text : 更新元素的 textContent更新元素的。v-html : 更新元素的 innerHTML更新元素的innerHTML。v-if : 如果为 true, 当前标签才会输出到页面根据表达式的真假值条件性地渲染元素。v-if是“惰性”的：如果条件为假，则元素不会出现在 DOM 中。v-else: 如果为 false, 当前标签才会输出到页面。
vue学习
weixin_52424354的博客
09-11 1161
Vue.js，我们通常简称为Vue，是一个用于构建用户界面的渐进式JavaScript框架。它就像是一个超级强大的工具箱，帮助开发者更轻松、更高效地创建网页和应用程序。它易于上手，同时提供了强大的数据绑定和组合视图组件的能力。
Vue学习之常用指令实例详解
10-15
本文将深入探讨Vue的常用指令及其应用。 1. **创建Vue实例**： Vue实例是Vue应用的基础，它连接了JavaScript数据和DOM元素。创建一个Vue实例需要指定一个挂载的目标元素（通过`el`选项），以及数据对象（通过`data...
Vue中常用的指令 学习 源代码
09-05
本资源为Vue基础框架及指令学习的源...可配合vue常用指令及用法总结进行相应练习： 学习网址https://blog.youkuaiyun.com/weixin_46474921/article/details/126673338 指令内容及源代码都是一致同步的，便于大家学习vue技术！
Vue学习—选项(二)methods
倾世~茹薇
04-16 3918
1.    methods 将被混入到 Vue 实例中。可以直接通过 app实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。不应该使用箭头函数来定义 method 函数 (例如 plus: () =&gt;this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。2....
Vue学习—Vue模板的写法
倾世~茹薇
04-11 1963
选项模板：不需要外部构造器，直接渲染到作用域视图中，使用与比较少的内容量可以使用它，可以利用ES6模板字符串``的方式来实现，也可以直接用字符串即"&lt;h1 style="color:red"&gt;我是选项模板&lt;/h1&gt;"，这时template和data、el一样都是Vue实例的一个选项，所以叫做选项模板。&lt;body&gt; &lt;h1&gt;模板的写法—01&lt
Vue学习—选项(三) mixins混入
倾世~茹薇
04-16 990
 mixins：mixins 选项接受一个混入对象的数组。这些混入实例对象可以像正常的实例对象一样包含选项，他们将在 Vue.extend() 里最终选择使用相同的选项合并逻辑合并。举例：如果你的混入包含一个钩子而创建组件本身也有一个，两个函数将被调用。Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。也就是说同一个生命周期钩子写在构造器外部的会比构造器里面的先调用，如下例子...
Vue学习—实例(一)
倾世~茹薇
04-17 737
创建Vue实例：每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：var vm = new Vue({......})，当创建一个 Vue 实例时，你可以传入一个选项对象。一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。数据与方法：(1) 当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 dat...
vue学习—vue.extend
倾世~茹薇
04-11 542
使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。data 选项是特例，需要注意在 Vue.extend() 中data必须是函数.创建 实例，并挂载到一个元素上。&lt;body&gt; &lt;h1&gt;v.extend &lt;/h1&gt; &lt;div id="header"&gt; &lt;/div&gt; &lt;script&
Vue学习—实例(二)实例方法
倾世~茹薇
04-17 484
vm.$mount：用法：如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。如果没有提供 elementOrSelector 参数，模板将被渲染为文档之外的的元素，并且你必须使用原生 DOM API 把它插入文档中。这个方法返回实例自身，因而可以链式调用其它实例方法。&lt;body&g...
Vue学习—选项(三)watch
倾世~茹薇
04-16 458
watch:{ [key: string]: string | Function | Object | Array } ,一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。&lt;body&gt; &lt;h1&gt;watch&lt;/h1&gt; &lt;di...
Vue常用指令深度解析与学习指南
### Vue 常用指令解析 Vue指令是扩展自HTML的自定义属性，它们以`v-`为前缀，作用是当表达式的值改变时，将其产生的连带影响响应式地作用于DOM。在本文件集中，我们将会学习到Vue.js中一些最常见的指令，从而提高...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值