程序员经验分享-hwhale

VUE基本指令(v-model,v-html,v-text,v-bind,v-if,v-show,v-for,v-on:click,组件,过滤器)

2023-11-10

双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  

<div id="app">
  <input type="text" v-model="message">
  <h1>{{ message }}</h1>
  <h2 v-html="message"></h2>   <!--v-html相当于innerHTML-->
  <h3 v-text="message"></h3>   <!--v-text相当于innerText-->
</div>


<script src="../vue.min.js"></script>
<script>

  var vm = new Vue({
    el:'#app',
    data:{
      message:'hello world',
      
    }
  })

</script>

</body>
</html>

这里写图片描述

v-bind(v-bind:title简化写法为:title)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  
<div id="app">
  <!--将变量biaoti绑定到a标签的title属性-->
  <!--将变量mytitle绑定到a标签的自定义属性data-tit上-->
  <a href="javascript:;" v-bind:title='biaoti' v-bind:data-tit='mytitle'>超链接</a>
</div>

<script src="../vue.min.js"></script>
<script>

  var vm = new Vue({
    el:'#app',
    data:{
      biaoti:'这是一个标题',
      mytitle:'我的自定义属性'
      
    }
  })

</script>

</body>
</html>

这里写图片描述

设置类名 v-bind:class

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .clr { background-color:pink; }
    .oneStyle { color:blue; font-size: 33px;}
    .twoStyle { font-size: 33px;}
  </style>
</head>
<body>
  
<div id="app">
  <div class="test" v-bind:class='{ clr:isClr }'>对象设置类名</div>
  <div class="test" v-bind:class='[one,two]'>数组设置类名</div>
  <div class="test" v-bind:class='[one,two,{clr:isClr}]'>对象和数组设置类名</div>
</div>

<script src="../vue.min.js"></script>
<script>

  var vm = new Vue({
    el:'#app',
    data:{
      biaoti:'这是一个标题',
      mytitle:'我的自定义属性',
      isClr:true,
      one:'oneStyle',
      two:'twoStyle'
    }
  })


</script>

</body>
</html>

这里写图片描述

隐藏/显示元素，v-if和v-show

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .clr { background-color:pink; }
    .oneStyle { color:blue; font-size: 33px;}
    .twoStyle { font-size: 33px;}
  </style>
</head>
<body>
  
<div id="app">
  <div class="test" v-if='isTrue'>if</div>  <!--isTrue为false则删除标签-->
  <div class="test" v-show='isTrue2'>show</div>    <!--isTrue为false则设置display:none;-->
</div>


<script src="../vue.min.js"></script>
<script>

  var vm = new Vue({
    el:'#app',
    data:{
      isTrue:true,
      isTrue2:false,
    }
  })

</script>

</body>
</html>

这里写图片描述

v-for

遍历数组

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .clr { background-color:pink; }
    .oneStyle { color:blue; font-size: 33px;}
    .twoStyle { font-size: 33px;}
  </style>
</head>
<body>
  
<div id="app">  
  <li class="test" v-for='(item,index) in items'> 元素:{{item}} 索引:{{index}} </li>  
</div>

<script src="../vue.min.js"></script>
<script>

  var vm = new Vue({
    el:'#app',
    data:{
      items:[1,2,3,4,5]
    }
  })

</script>

</body>
</html>

这里写图片描述

遍历对象

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .clr { background-color:pink; }
    .oneStyle { color:blue; font-size: 33px;}
    .twoStyle { font-size: 33px;}
  </style>
</head>
<body>
  
<div id="app">  
  <li class="test" v-for='(key,value,index) in obj'> key-{{key}} value-{{value}} index-{{index}} </li>  
</div>

<script src="../vue.min.js"></script>
<script>

  var vm = new Vue({
    el:'#app',
    data:{
      obj:{name:'tom',agee:188,addr:'usa'}
    },
  
  })

</script>

</body>
</html>

这里写图片描述

v-on:click 点击事件（简化语法@click）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .clr { background-color:pink; }
    .oneStyle { color:blue; font-size: 33px;}
    .twoStyle { font-size: 33px;}
  </style>
</head>
<body>
  
<div id="app">  
  <button v-on:click="myClick">给对象添加内容</button>
  <li class="test" v-for='(key,value,index) in obj'> key-{{key}} value-{{value}} index-{{index}} </li>  
</div>

<script src="../vue.min.js"></script>
<script>

  var vm = new Vue({
    el:'#app',
    data:{
      obj:{name:'tom',agee:188,addr:'usa'}
    },
    methods:{
      myClick:function(){
        this.obj.name='jack'
        console.log( this.obj )
      }
    }
  
  })

</script>

</body>
</html>

这里写图片描述
点击按钮之后
这里写图片描述

组件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .clr { background-color:pink; }
    .oneStyle { color:blue; font-size: 33px;}
    .twoStyle { font-size: 33px;}
  </style>
</head>
<body>
  
<div id="app">  
  <my-ele></my-ele>
</div>

<script src="../vue.min.js"></script>
<script>

  Vue.component( 'myEle' , {
    data:function(){
      return {
        num:0,
        arr:[1,2,3],
        str:'i am component'
      }
    },
    template:'<h1 @click="num++">我的组件 {{ arr[1] }} {{ num }}</h1>'
  })

  var vm = new Vue({
    el:'#app'
  })

</script>

</body>
</html>

这里写图片描述

私有组件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .clr { background-color:pink; }
    .oneStyle { color:blue; font-size: 33px;}
    .twoStyle { font-size: 33px;}
  </style>
</head>
<body>
  
<div id="app">  
  <my-ele v-bind:mydata='num'></my-ele>
</div>

<script src="../vue.min.js"></script>
<script>

  var vm = new Vue({
    el:'#app',
    data:{
      num:200
    },
    methods:{
      btnClick:function(){
        this.num++
      }
    },
    components:{
      myEle:{
        data:function(){
          return {
            num2:10
          }
        },
        props:['mydata'],
        template:'<h1>自身的值{{ num2 }}  传来的值{{ mydata }} </h1>'
      }
    }
  })

</script>

</body>
</html>

这里写图片描述

过滤器

全局过滤器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .clr { background-color:pink; }
    .oneStyle { color:blue; font-size: 33px;}
    .twoStyle { font-size: 33px;}
  </style>
</head>
<body>
  
<div id="app">  
  <div> {{ 'ABC' | toLowCase }}</div>
</div>

<script src="../vue.min.js"></script>
<script>

Vue.filter('toLowCase',function( str ){
  return str.toLowerCase();
})

var vm = new Vue({
  el:'#app'
})

</script>

</body>
</html>

这里写图片描述

私有过滤器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .clr { background-color:pink; }
    .oneStyle { color:blue; font-size: 33px;}
    .twoStyle { font-size: 33px;}
  </style>
</head>
<body>
  
<div id="app">  
  <div> {{ str | lowCase }}</div>
</div>

<script src="../vue.min.js"></script>
<script>


var vm = new Vue({
  el:'#app',
  data:{
    str:'abcd'
  },
  filters:{
    lowCase:function( str ){
      return str.toUpperCase() 
    }
  }
})


</script>
</body>
</html>

这里写图片描述

路由

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .clr { background-color:pink; }
    .oneStyle { color:blue; font-size: 33px;}
    .twoStyle { font-size: 33px;}
  </style>
</head>
<body>
  
<div id="app">  
  <router-link to='/internationalNews'>国际新闻</router-link>
  <router-link to='/nativeNews'>国际新闻</router-link>
  <router-view></router-view>
</div>


<script src="../vue.min.js"></script>
<script src="../vue-router.min.js"></script>
<script>

var news1 = Vue.component('my-news1',{
  template:'<h1>特朗普就任美国总统</h1>'
})

var news2 = Vue.component('my-news2',{
  template:'<h1>北京房价已上天！</h1>'
})

var myroute = new VueRouter({
  routes:[
    { name:'new1' , path:'/internationalNews' , component:news1 } ,
    { name:'new2' , path:'/nativeNews' , component:news2 } ,
  ]
})

var vm = new Vue({
  el:'#app',
  router:myroute
})


</script>
</body>
</html>

这里写图片描述

这里写图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

13 VUE

vue

VUE基本指令(v-model,v-html,v-text,v-bind,v-if,v-show,v-for,v-on:click,组件,过滤器) 的相关文章

随机推荐

  • CentOS利用expect批量推送ssh public key的脚本

    方法1 bin bash Author Razor QQ 254456122 Date 2021 10 29 FileName sshkey sh URL https blog csdn net mandarin meng spm 1019

  • 使用预训练模型运行DiffusionDetection

    工程链接 https github com ShoufaChen DiffusionDet DIffusionDet需要的基础环境及各种包都配置好了 接下来我们开始用Pre trained Model来运行demo py 1 打包下载工程

  • Shell脚本之read用法

    read 默认接受键盘的输入 回车符代表输入结束 read命令选项 p 打印信息 t 限定时间 s 不回显 n 输入字符个数 bin bash clear echo n e Login read acc read p Login acc e

  • python函数练习题讲解

    自学的知识 用来记录一下 练习 1 写一个打印一条横线的函数 提示 横线是若干个 组成 2 写一个函数 可以通过输入的参数 打印出自定义行数的横线 提示 调用上面的函数 3 写一个函数求三个数的和 4 写一个函数求三个数的平均值 提示 调用

  • va_start和va_end详解

    1 在C中 当无法列出传递函数的所有实参的类型和数目时 可以用省略号指定参数表 例如 void foo void foo parm list 2 函数参数的传递原理 函数参数是以栈的形式存取 从右至左入栈 参数的内存存放格式 参数存放在内存

  • 如何查看海思SDK的版本

    命令 cat proc umap vpss 效果如下 第一行的version就是版本信息

  • html学习——表格标签

    表格 1 1 1 2 1 3 2 1 2 2 2 3 3 1 3 2 3 3 table border 1px tr td 1 1 td td 1 2 td td 1 3 td tr tr td 2 1 td td 2 2 td td 2

  • css3直线运动_CSS3实现动画线条运动效果实例集合（一）

    在我们日常的开发中 有时候有的图片 布局块需要加一下边框运动效果 对于这些效果 我们可以使用CSS3动画属性animation 再配合css的一些技巧制作出来 下面是收藏的一些效果实例 1 边框流动效果 html css3效果的内容部分 c

  • 手写一个react-redux，原理一目了然

    react redux的功能如下 Provider 为后代组件提供store connect 为组件提供数据和变更方法 数据变化时自动更新组件 了解react redux的功能移步这里 下面我们开始实现react redux的几个功能 my

  • curl命令忽略不受信任的https安全限制

    用curl命令没有得到返回 还报了个提示 curl 60 Issuer certificate is invalid More details here http curl haxx se docs sslcerts html curl p

  • idea学习系列五之debug及插件的使用

    idea学习系列五之debug及插件的使用 上一篇 介绍了maven及服务器的使用 这里将介绍idea中debug及插件的使用 在实际开发中debug是最常用的了 而且idea相比于eclipse中的debug还新增了一些比较好用的功能 还

  • 微信小程序教你实现双层嵌套菜单栏

    最近在做的项目有这样一个需求 也不太好描述 就是有两个顶部菜单栏 每个二级菜单栏的item都有自己页面 每个页面都可以通过左右滑动来切换 第一个想到的实现方法就是双层swiper嵌套 但想要达到一个联动的效果还是有一点点复杂 去网上找了一圈

  • IT-项目管理（大作业个人报告）

    文章目录 担任角色 开发方法 前端工作 CI CD流水线 担任角色 前端开发 CI CD流程实现 开发方法 基于现有框架Vue或React中的一种 使用iview或antd库 构建前端Web交互界面 对于已收集的需求 小组会议 论坛交流 看

  • 基于IO、NIO、Netty的Java网络程序

    基于IO NIO Netty的Java网络程序 一 IO 1 项目创建 2 代码 3 运行 二 NIO 1 项目创建 2 代码 3 运行 三 Netty 1 项目环境配置 2 代码 3 运行结果 总结 参考文章 一 IO 1 项目创建 在I

  • Junit单元测试，BIO、NIO、AIO概念、Buffer类，Channel通道

    单元测试 Junit介绍 Junit是一个Java语言的单元测试框架 简单理解为可以用取代Java的 部分 main方法 Junit属于第三方工具 需导入jar包后使用 Junit基本使用 Junit的作用 可以单独的运行某一个方法 Jun

  • LeetCode算法，每日一题，冲击字节跳动

    目录 1 LeetCode 20 有效的括号 题目 小编菜解 思路及算法 大神解法 2 LeetCode 26 删除有序数组中的重复项 题目 小编菜解初版 小编菜解改进版 思路及算法 大神解法 3 LeetCode 28 实现strStr

  • cmd停止情况

    情况描述 win10在使用cmd时 鼠标点击后出现cmd整个停止的情况 例如 在下载时 鼠标左键点击了cmd黑框里的内容 结果下载停止了 解决方式 出现这一情况的原因是 cmd开启了快速编辑模式 在cmd上框右键属性 关闭即可

  • 面向对象编程的六大原则

    一 面向对象编程的六大原则 单一责任原则 对类来说的 即一个类应该只负责一项职责 如类A负责两个不同职责 职责1 职责2 当职责1需求变更而改变A时 可能造成职责2执行错误 所以需要将类A的粒度分解为A1 A2 接口隔离原则 客户端不应该依

  • Pycharm Debug(断点调试)超详细攻略

    前言 PyCharm Debug 可以帮助开发者在代码运行时进行实时的调试和错误排查 提高代码开发效率和代码质量 当然也可以对源码进行断点调试 领略源码的魅力 具体操作步骤 准备一段代码 让我们来举个简单的栗子 这段代码主要作用 循环ran

  • VUE基本指令(v-model,v-html,v-text,v-bind,v-if,v-show,v-for,v-on:click,组件,过滤器)

    文章目录 双向数据绑定 v bind v bind title简化写法为 title 设置类名 v bind class 隐藏 显示元素 v if和v show v for 遍历数组 遍历对象 v on click 点击事件 简化语法 cl

热门标签