vue基本指令详解1

最新推荐文章于 2024-07-02 09:49:13 发布
最新推荐文章于 2024-07-02 09:49:13 发布
阅读量51 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/typeof83/article/details/109732183
版权

class绑定

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>

</style>
</head>
<body>

<div id="app">
  <div :class="classN">一个坑1</div>
  <div :class="2<3?'box1':'box2'">一个坑2</div>
  <div :class="[class1,class2]">一个坑3</div>
  <div :class="[class1,class2,2<3?'red':'pink']">一个坑4</div>
  <div :class="{active: boo,yellow: true}">一个坑5</div>
  <div :class="{active: boo,yellow: true}" class="pink">一个坑6</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 创建vue实例
var vm = new Vue({//配置项
  el: '#app',// 挂载点
  data: {// 数据
    classN: 'active',
    class1: 'blue',
    class2: 'green',
    boo: false
  },
  methods: {// 方法，事件处理函数所在的地方
    
  }
})
</script>
</body>
</html>

style绑定

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>

</style>
</head>
<body>

<div id="app">
  <div :style="classN">一个坑1</div>
  <div :style="{color:'blue'}">一个坑2</div>
  <div :style="{color:col}">一个坑3</div>
  <div :style="{'font-size':size}">一个坑4</div>
  <div :style="{fontSize:size}">一个坑5</div>
  <div :style="objStyle">一个坑6</div>
  <div :style="[objStyle,objStyle2]">一个坑7</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 创建vue实例
var vm = new Vue({//配置项
  el: '#app',// 挂载点
  data: {// 数据
    classN: 'color: red;',
    col: 'yellow',
    size: '24px',
    objStyle: {
      fontSize: '22px',
      color: 'red',
      backgroundColor: '#ccc' 
    },
    objStyle2: {
      width: '200px',
      height: '100px'
    }
  },
  methods: {// 方法，事件处理函数所在的地方
    
  }
})
</script>
</body>
</html>

**## 数据双向绑定v-model**

```javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>

</style>
</head>
<body>

<div id="app">
  <!-- <input type="text" v-bind:value="inputValue" v-on:input="changeVal"> -->
  <input type="text" v-model:value="inputValue">
  <h3>{{inputValue}}</h3>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 创建vue实例
var vm = new Vue({//配置项
  el: '#app',// 挂载点
  data: {// 数据
    inputValue: 'hello'
  },
  methods: {// 方法，事件处理函数所在的地方
    changeVal(e){
      // 当表单元素的值改变时，同步到数据inputValue
      this.inputValue = e.target.value;
    }
  }
})
</script>
</body>
</html>
猪皮惡霸
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue自定义指令（详解）
蜗牛~~
02-17 3277
vue自定义指令，核心就是需要自己亲手去操作DOM 而vue中的内置指令例如v-model只不过是vue帮你动了dom上的display属性， 所以自定义指令，就是自己亲手对原生操作dom进行了一次封装 局部指令 需求一：定义一个v-big指令，让它和v-text功能类似，把绑定的值放大10倍 我们现在自定义一个big指令，展示放大10倍的num值，让v-big指令和v-text指令作用一样 <template> <div class="myDiv"> .
vue内置指令详解
08-27
Vue 内置指令详解 Vue 内置指令是 Vue 模板中最常用的功能之一，它们带有前缀 v-，主要职责是当其表达式的值改变时，相应的将某些行为应用在 DOM 上。下面将详细介绍 Vue 内置指令的使用方法和应用场景。 一、v-...
vue3 指令详解
枫ゞ的博客
01-07 2155
Vue 中的指令是用来操作DOM元素的特殊属性，它们可以在模板中使用，并且通过Vue实例的指令选项进行自定义。
Vue自定义指令详解
加强前端基础
05-17 2506
Vue自定义指令详解
Vue指令语法详解
AK Zzz的博客
12-07 665
Vue基础语法一.Vue是什么二.Vue实例成员三.Vue指令(标红属性说明有简写语法)1.v-text2.v-html3.v-on4.v-bind5.v-for6.v-model7.v-if8.v-show9.v-slot四.计算属性computed五.侦听器watchVue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架vue是一个框架 ： 很多个库的组合vue作用：用于构建用户页面,把数据渲染到页面DOM上vue特点： 渐进式(你不需要一开始就导入所有的功能，而是随着开发
Vue常用指令大全（详解）
m0_69057918的博客
01-12 1419
Vue常用指令说明及使用，通过Vue指令操作本地数据（详解）
Vue中的自定义指令详解
m0_63144319的博客
09-22 478
自定义指令：自己定义的指令，可以封装一些dom 操作，扩展额外功能（自动聚焦，自动加载，懒加载等复杂的指令封装）全局注册（可以在其他组件中使用）Vue.directive('指令名'，{//可以对el标签，扩展额外功能el.focus() //对元素的操作})局部注册（只能在当前的组件中使用）指令名:{//可以对el标签，扩展额外功能el.focus() //对元素的操作页面上使用：< input v-指令名type = " text " >
Vue自定义指令 详解
smouns_的博客
11-20 405
vue的基本指令 自定义指令另一种方式,往往在实际工作中,自定义的指令会比较多,抽离成一个单独的文件,再全局注册,此时需要用到循环注册(同样适用与过滤器) 代码如下: // 导入自定义指令文件src/directives/index.js中 import directiveJs from '@/directives' // 全局注册 自定义指令 // 遍历 文件导入的 对象 // 方式一:for循环 // for (const k in directiveJs) { // Vue.direc
两周掌握Vue3（二）：Vue基本代码构成、Vue3指令详解
TracyCoder的博客
01-10 1457
在Vue CLI脚手架项目中，你可以在Vue文件的标签中使用Vue指令。Vue指令是Vue.js提供的一种特殊属性，用于在模板中实现数据绑定、条件渲染、循环渲染等功能。v-bind：用于动态绑定HTML属性，例如会将imageSrc的值绑定到src属性上。v-model：用于实现表单输入元素和应用状态之间的双向绑定，例如会将message的值与输入框的值进行双向绑定。v-ifv-elsev-else-if：用于条件性地渲染元素，例如会根据seen的值来决定是否渲染这个段落。v-for。
Vue 内置指令详解
My_wife_QBL的博客
07-02 438
Vue 内置指令是 Vue 模板语法的一部分，用于在 DOM 元素上添加特定的行为。指令通常以v-前缀开头，如v-bindv-onv-if等。通过使用这些指令，开发者可以方便地操作 DOM 元素，实现数据绑定、事件处理、条件渲染等功能。
vue自定义指令实现方法详解
10-17
在Vue中，自定义指令（Custom Directives）是一个强大的特性，它允许我们扩展Vue的内置指令，如v-on、v-bind等，来实现更复杂的DOM操作。下面我们将详细探讨Vue自定义指令的定义、注册和使用方法。 ### 一、定义...
详解Vue中的基本语法和常用指令
10-16
Vue.js 是一套构建用户界面的框架，**只关注视图层**，它不仅易于上手，还便于与第三方库或既有项目整合。这篇文章主要介绍了vue 的基本语法和常用指令,需要的朋友可以参考下
b050闲置图书分享-springboot+vue+elementui.zip（可运行源码+sql文件+文档）
07-23
本次开发的闲置图书分享平台实现了收货地址管理、字典管理、公告管理、留言板管理、图书管理、图书收藏管理、图书评价管理、图书订单管理、用户管理、管理员管理等功能。系统用到了关系型数据库中王者MySql作为系统的数据库，有效的对数据进行安全的存储，有效的备份，对数据可靠性方面得到了保证。并且程序也具备程序需求的所有功能，使得操作性还是安全性都大大提高，让闲置图书分享平台更能从理念走到现实，确确实实的让人们提升信息处理效率。 管理图书的数据，此页面主要实现图书的增加、修改、删除、查看的功能。公告信息管理页面提供的功能操作有：新增公告，修改公告，删除公告操作。公告类型管理页面显示所有公告类型，在此页面既可以让管理员添加新的公告信息类型，也能对已有的公告类型信息执行编辑更新，失效的公告类型信息也能让管理员快速删除。
《大学生职业生涯规划与就业指导》大一阶段课程作业
最新发布
07-24
《大学生职业生涯规划与就业指导》大一阶段课程作业
开题报告潮汕特产直销系统 已通过开题答辩的.doc
07-23
随着互联网的高速发展，人们的生活方式发生了翻天覆地的变化，在过去，人们想要购买很远地方的东西会非常麻烦，因为是通信和交通都不是十分的方便，而现在网络购物成为了人们日常生活中不可或缺的一部分。在这样的背景下，互联网与传统行业的融合已经成为了一种不可阻挡的趋势。对于中国特色的潮汕特产来说，这一趋势也带来了巨大的变革和发展机遇[1]。
Python性能优化：掌握性能分析工具的实战指南
07-23
Python是一种广泛使用的高级编程语言，由Guido van Rossum于1989年底发明，第一个公开发行版发行于1991年。Python的设计哲学强调代码的可读性和简洁的语法（尤其是使用空格缩进来区分代码块，而不是使用大括号或关键词）。这使得Python被认为是一种易于学习的语言，同时具备强大的功能，适合初学者和经验丰富的程序员。 Python的主要特点包括： 1. **易于学习**：Python有相对较少的关键字，结构简单，和一个明确定义的语法。 2. **易于阅读**：Python代码定义的清晰度使得它像可执行伪代码。 3. **易于维护**：Python的成功在于它的源代码是相当容易维护的。 4. **广泛的标准库**：Python的标凑库很庞大，包含用于互联网通信、网络通信、数据压缩、加密、系统管理等的模块。 5. **跨平台**：Python可以在多种操作系统上运行，包括但不限于Windows、Mac OS X、Linux等。 6. **解释型语言**：Python是一种解释型语言，这意味着开发过程中没有编译步骤。 7. **动态类型系统**：Python不会在编写
Android学习系列之gradle实战
07-23
Android学习系列之gradle实战
Vue指令详解：列表渲染、表单绑定与安全实践
在本文档中，我们主要探讨了Vue指令的几个关键类别及其应用场景。 首先，**列表渲染指令** `v-for` 是Vue中处理数据驱动视图的关键工具，通过它可以根据数组或对象循环渲染元素，实现列表展示。例如，当你需要遍历...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值