首页 > 其他分享 >Vue常用指令

Vue常用指令

时间：2023-05-16 14:01:20浏览次数：45  
标签：el 常用 Vue 定义数据 app num 指令 new

1、v-model：绑定变量，双向绑定

　　v-model.lazy：在事件之后同步进行

　　v-model.number：把用户输入的数据类型转换为数值类型

　　v-model.trim：去掉首尾空格

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<!-- 1.vue引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 绑定变量msg -->
<input type="text" v-model="msg">
<!-- 显示msg的值，与输入框同步更新 -->
<h2>{{msg}}</h2>
<!-- 使用v-html绑定原生的HTML代码 -->
<span v-html="rawHtml"></span>
<div>{{ok?'YES':'NO'}}</div>
<!-- 在事件之后进行同步 -->
<input type="text" v-model.lazy="lazy">
<h2>{{lazy}}</h2>
<br>
<!-- 把用户的输入类型转换为数值类型 -->
<input type="text" v-model.number="number">
<h2>{{typeof number}}</h2>
<!-- 自动过滤收尾的空格 -->
<input type="text" v-model.trim="trim">
<h2>{{trim}}</h2>
</body>
</html>
<script>
//实例化 vue
var vm =new Vue({
//需要传入对象
//指定挂在元素
el:"#app",
//定义数据
data:{
msg:'',
rawHtml:'<span style="color:red">这里是红色</span>',
ok:'1',
lazy:'',
number:'',
trim:''
}
})
</script>

2、v-html：绑定原生的HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<!-- 1.vue引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 绑定变量msg -->
<input type="text" v-model="msg">
<!-- 显示msg的值，与输入框同步更新 -->
<h2>{{msg}}</h2>
<!-- 使用v-html绑定原生的HTML代码 -->
<span v-html="rawHtml"></span>
<div>{{ok?'YES':'NO'}}</div>
<!-- 在事件之后进行同步 -->
<input type="text" v-model.lazy="lazy">
<h2>{{lazy}}</h2>
<br>
<!-- 把用户的输入类型转换为数值类型 -->
<input type="text" v-model.number="number">
<h2>{{typeof number}}</h2>
<!-- 自动过滤收尾的空格 -->
<input type="text" v-model.trim="trim">
<h2>{{trim}}</h2>
</body>
</html>
<script>
//实例化 vue
var vm =new Vue({
//需要传入对象
//指定挂在元素
el:"#app",
//定义数据
data:{
msg:'',
rawHtml:'<span style="color:red">这里是红色</span>',
ok:'1',
lazy:'',
number:'',
trim:''
}
})
</script>

3、v-if：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<!-- 1.vue引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="isShow">isShow is true</h1>
<h1 v-else>isShow is false</h1>
<template v-if="isShow">
<p>段落1</p>
<p>段落2</p>
</template>
<div v-show="isShow">true 可以显示</div>
</body>
</html>
<script>
//实例化 vue
var vm =new Vue({
//需要传入对象
//指定挂在元素
el:"#app",
//定义数据
data:{
isShow:false
}
})
</script>

 

4、v-else

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<!-- 1.vue引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="isShow">isShow is true</h1>
<h1 v-else>isShow is false</h1>
<template v-if="isShow">
<p>段落1</p>
<p>段落2</p>
</template>
<div v-show="isShow">true 可以显示</div>
</body>
</html>
<script>
//实例化 vue
var vm =new Vue({
//需要传入对象
//指定挂在元素
el:"#app",
//定义数据
data:{
isShow:false
}
})
</script>

5、v-show

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<!-- 1.vue引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-if="isShow">isShow is true</h1>
<h1 v-else>isShow is false</h1>
<template v-if="isShow">
<p>段落1</p>
<p>段落2</p>
</template>
<div v-show="isShow">true 可以显示</div>
</body>
</html>
<script>
//实例化 vue
var vm =new Vue({
//需要传入对象
//指定挂在元素
el:"#app",
//定义数据
data:{
isShow:false
}
})
</script>

6、v-on　

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<!-- 1.vue引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{num}}</div>
<button v-on:click="add">点击+1</button>
<button @click="add2(2)">点击+2</button>
</div>
</body>
</html>
<script>
//实例化 vue
var vm =new Vue({
//需要传入对象
//指定挂在元素
el:"#app",
//定义数据
data:{
num:1,
},
methods:{
add:function(){
this.num++;
},
add2:function(num1){
this.num = this.num+num1
//打印日志
console.log(num1)
}

}
})
</script>

7、methods

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<!-- 1.vue引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{num}}</div>
<button v-on:click="add">点击+1</button>
<button @click="add2(2)">点击+2</button>
</div>
</body>
</html>
<script>
//实例化 vue
var vm =new Vue({
//需要传入对象
//指定挂在元素
el:"#app",
//定义数据
data:{
num:1,
},
methods:{
add:function(){
this.num++;
},
add2:function(num1){
this.num = this.num+num1
//打印日志
console.log(num1)
}

}
})
</script>

 

8、v-bind：绑定属性

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<!-- 1.vue引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 指定样式通过css指定 -->
<div style="width: 100px;height:100px;border:1px solid #000" v-bind:style="bgcolor">true 可以显示</div>
<!-- 绑定超链接 -->
<a :href="baidu">访问百度</a>
</body>
</html>
<script>
//实例化 vue
var vm =new Vue({
//需要传入对象
//指定挂在元素
el:"#app",
//定义数据
data:{
//设置背景色
bgcolor:{
backgroundColor:'blue'
},
//绑定超链接为百度首页
baidu:'https://www.baidu.com'
}
})
</script>

 

 

9、v-href：绑定超链接

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<!-- 1.vue引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 指定样式通过css指定 -->
<div style="width: 100px;height:100px;border:1px solid #000" v-bind:style="bgcolor">true 可以显示</div>
<!-- 绑定超链接 -->
<a :href="baidu">访问百度</a>
</body>
</html>
<script>
//实例化 vue
var vm =new Vue({
//需要传入对象
//指定挂在元素
el:"#app",
//定义数据
data:{
//设置背景色
bgcolor:{
backgroundColor:'blue'
},
//绑定超链接为百度首页
baidu:'https://www.baidu.com'
}
})
</script>

 

10、v-for:遍历对象

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<!-- 1.vue引入 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 遍历数组 -->
<div v-for="item in list">{{item}}</div>
<!-- 遍历数组，并提取索引 -->
<li v-for="(item,index) in list">
{{index}}-{{item}}
</li>
<!-- 迭代对象 -->
<li v-for="item of items">{{item}}</li>
<li v-for="(item,key) of items">
{{key}} : {{item}}
</li>
<!-- 提取对象的索引 -->
<li v-for="(item,key,index) of items">
{{index}} : {{key}} : {{item}}
</li>

</div>
</body>
</html>
<script>
//实例化 vue
var vm =new Vue({
//需要传入对象
//指定挂在元素
el:"#app",
//定义数据
data:{
list:[1,2,3],
items:{
one:'第一组',
two:'第二组',
three:'第三组'
}
}

})
</script>

 

标签：el,常用,Vue,定义数据,app,num,指令,new
From： https://www.cnblogs.com/mamilaila/p/17402158.html

相关文章

  • 开发板三菱FX3U底层源码，总体功能和指令可能支持在RUN中下载程序，支持注释的写入和读取，
    开发板三菱FX3U底层源码，总体功能和指令可能支持在RUN中下载程序，支持注释的写入和读取，支持脉冲输出与定位指令(包括PLSY/PWM/PLSR/PLSV/DRVI/DRVA等指令)。对于FX3U，支持波特率9600/19200/38400/57600/115200自适应ID:58199670048570922......
  • conda 常用命令
    conda的一个最大的优势，就是可以构建多个python虚拟环境，他们彼此隔绝互不干扰，当需要用到哪个环境时就切换到此。举个例子：你正在python3.7的环境下做开发，这时接到一个新活需要用到python2.7版本，这时你就可以使用conda新建一个python2.7的环境切换到此，来完成新任务，不会影......
  • maven 常用命令
    Maven库：[url]http://repo2.maven.org/maven2/[/url]Maven依赖查询：[url]http://mvnrepository.com/[/url]Maven常用命令：[color=darkblue]1.创建Maven的普通java项目：mvnarchetype:create-DgroupId=packageName-DartifactId=projectName2.创建Maven的Web项目：mv......
  • Vue跨域详解
    碰到这种问题，其实你的接口已经通了，但是在页面上就是访问不通过。你可以把API请求地址单独拎出来新开个网站打开看请求是否成功，成功，但是你的项目不通。有那么几个可能吧：1、请求头设置错误headers={ 'Content-Type':'application/json'//错误的'......
  • Vue、React和小程序都是流行的前端开发框架/平台
    Vue、React和小程序都是流行的前端开发框架/平台，它们各有优缺点。Vue的优点：简单易学：Vue的语法简单明了，易于理解和学习。渐进式框架：Vue可以逐渐地集成到现有项目中，也可以作为完整的单页应用程序开发。响应式设计：Vue的响应式设计使得数据变化后UI自动更新，方便快捷。高......
  • vue contenteditable处理火狐浏览器复制带标签问题
    this.$refs.materialTxt.addEventListener('paste',function(e){console.log('监听到了')e.stopPropagation()e.preventDefault()lettext='';constevent=(e.originalEvent||e)if(event.c......
  • Vue.js(九) 第三方常用插件
    1.Vue.jsdevtools用于开发调试Vue.js的一个必备插件。可以在Chrome中的扩展程序中直接安装，也可以本地文件的方式安装。2.nprogress页面顶部进度条当路由切换事会在浏览器的顶部出现一个蓝色进度条用于表示路由切换的进度，并在又上角有个蓝色loading的动画。一般情况下切换到目标......
  • Vue.js(十) element-ui PC端组件库
    一：简介饿了么公司基于Vue开发了两套UI组件库，PC端组件库和移动端组件库。一部分组件库是对原生的HTML标签元素的封装，增加了一些新的功能。另一部分组件库是原生HTML标签元素没有的，是一些比较常用的独立的功能(如：分页、进度条、加载中、树形控件等)，将这些独立的常用的功能封装成......
  • Docker CLI docker compose top常用命令
    Docker是一个开源的应用容器引擎，让开发者可以打包他们的应用以及依赖包到一个可移植的镜像中，然后发布到任何流行的Linux或Windows操作系统的机器上，也可以实现虚拟化。Docker是内核虚拟化，不使用Hypervisor是不完全虚拟化，依赖内核的特性实现资源隔离。本文主要介绍DockerCLI中d......
  • 本人NAS中常用docker配置文件分享
    由于重装系统的时候，备份docker备份有误，现在所有的docker都得重新安装，想着在安装的时候顺便分享一下使用的镜像吧系统：Ubuntu23.04(GNU/Linux6.2.0-20-genericx86_64)配置：cpu：8700tes内存：16g*2固态：1t机械：4t+4t+12t+8tGPU：Teslap4机箱：T48......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99