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

最新推荐文章于 2024-05-06 20:52:53 发布
最新推荐文章于 2024-05-06 20:52:53 发布
阅读量2.7w 收藏 34
点赞数 5
分类专栏： 1.3 VUE 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kingov/article/details/71088073
版权

文章目录

双向数据绑定

<!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>

这里写图片描述

这里写图片描述

kingov
关注
  • 5
    点赞
  • 踩
  • 34
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue笔记 内置指令 v-text v-html v-cloak v-once v-pre
qiaoyangla的博客
03-24 2096
v-bind：单向绑定解析表达式，可简写为：xxx v-model:双向数据绑定 v-for：遍历数组/对象/字符串 v-on：绑定事件监听，可简写为@ v-if：条件渲染（动态控制节点是否存在） v-else：条件渲染（动态控制节点是否存在） v-show：条件渲染（动态控制节点是否展示） 1、v-text 向其所在的节点中渲染文本内容, 与插值语法的区别：v-text会替换掉节点中的内容，{{xxx}}不会，还是插值语法用的多 <div>{{name}}</div
Vue基础 第三讲笔记：v-text、v-html、v-on
qq_49956121的博客
10-02 459
一、v-text指令 设置标签的内容。 特点： 1、默认写法会替换全部内容，使用插值表达式{{ }}可以替换指定内容。 2、内部支持写表达式。 注意： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> {{ message }}哈哈
Vue 之 解决v-html生成的元素不能触发@click等vue事件和CSS样式不生效的方法
weixin_45092437的博客
09-05 1万+
通过官方文档可以得知两个重点：① 通过v-html生成的页面元素，不会被当做Vue模板进行编译，只会作为普通的html代码被插入，也就是说通过v-html插入的html@click、v-if等，则不会生效，因为他们没有被Vue编译，而浏览器并不会识别这些vue语法，所以这些语法都不生效。② 在.vue文件中如果style标签上增加了scoped属性，那么该标签内的样式就不会对v-html生成的页面元素起作用，还是因为这些元素没有被当做Vue模板进行编译，所以不生效。
深入了解Vue 3.0中的v-html指令：用法、安全性与最佳实践
最新发布
李长渊的博客
05-06 1300
深入了解Vue 3.0中的v-html指令：用法、安全性与最佳实践
Vue 常用指令 内容绑定/事件绑定 v-text、v-html、v-on
小楼一夜听春雨，深巷明朝卖杏花
06-16 2627
但是使用v-html的时候那么html的各种属性都能够渲染出来。最终将v-text渲染为一个html的文本。在开发过程当中使用vue的语法，但是在实际最终会将vue的语法转化渲染为html页面。可以看到做文本的时候可以使用v-text，同时也可以看到在vue框架里面可以在HTML标签当中使用vue属性。在前端开发中，我们经常监听用户发生的事件，例如点击、拖拽、键盘事件等。在整个vue的编写过程当中，只要带v-的，那么都是常用的vue的指令。显示HTML文本的，某些情况下，从服务端请求的数据本身就是一个。
Vue v-model组件封装(类似弹窗组件)
10-15
<div v-show="value">这是v-model的弹窗组件 export default { props: { value: { type: Boolean, default: false } } } ``` 在父组件中，我们可以直接使用 `v-model` 来控制这个弹窗组件： ```html ...
vue.js使用v-model实现父子组件间的双向通信示例
10-15
`v-model`指令是Vue.js提供的一种便捷方式，用于实现表单元素与数据模型之间的双向绑定。在这个示例中，我们将探讨如何利用`v-model`来实现在父子组件之间进行双向通信。 首先，让我们了解一下`v-model`的基本概念...
vue- 基础使用 ，v-for、v-bind、v-if/v-else、v-show、v-model、.v-on
03-08
vue- 基础使用 ，v-for、v-bind、v-if/v-else、v-show、v-model、.v-on
vue面试题-vue常见面试题和答案
07-08
v-model 用于表单数据的双向绑定，实际上是 v-bind 绑定一个 value 属性和 v-on 指令给当前元素绑定 input 事件。 13. vue-cli 项目中 src 目录每个文件夹和文件的用法 * assets 文件夹：放静态资源 * components ...
vue面试题-vue常见面试题和答案.pdf
02-11
4. **v-show和v-if指令的区别**： - **共同点**：两者都能控制元素的显示和隐藏。 - **不同点**：v-show通过CSS的`display`属性控制，始终编译；v-if会动态地添加或移除DOM元素，初始值为false时不会编译。频繁...
关于 onclick 与 bind ‘click’ 的讨论
03-31
NULL 博文链接：https://ztreeapi.iteye.com/blog/1343711
Vue学习02——v-text、v-html、v-on
09-06 210
v-text指令 v-text指令的作用是：设置标签的文本值 默认写法会替换全部内容，使用插值表达式{{}}可以替换指定内容 内部支持写表达式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti
Vue2 + Vue3学习笔记（十一）常用指令 v-model v-text v-html等的总结
qq_41867900的博客
12-10 689
常用指令总结
详解VUE中v-bind的基本用法
码农之路
08-23 1万+
1. v-bind:class（根据需求进行选择） 1.1 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ...
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 3919
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
VUE 爬坑之旅-- v-for，v-on:click 使用需要注意的地方
热门推荐
Alex_Zhao 的博客
10-27 2万+
今天在写一个页面的时候，需要在一个 v-for 循环里面给每个 item 绑定一个点击事件，在这个事件中我需要拿到所点击 item 里面的数据和它的 index。
HTML之Vue框架v-for、v-if的简单使用
你的大数据学长
02-17 6046
HTML之Vue框架 v-for、v-if 的简单使用目标代码结果展示 目标 数据定义一个数组，通过对v-for的使用，实现如下界面 使用v-if，使上述的奇数行不出现，效果如下图所示 代码 该代码可在我的GitHub中找到，链接在此 index1.html： <!DOCTYPE html> <html lang="en"> <head> <m...
react 实现vue里面的 v-html&&v-if&&v-show.html
04-16 6027
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id
给我v-model v-if v-bind v-for v-show各自的简短介绍
08-12
当然，下面是v-model、v-if、v-bind、v-for和v-show的简短介绍： 1. v-model：v-model是Vue.js中的一个双向数据绑定指令，用于在表单元素和Vue实例的数据之间建立双向绑定。它可以将表单元素的值与Vue实例中的数据进行同步。常用于表单输入元素，如input、textarea和select。 2. v-if：v-if是Vue.js中的一个条件渲染指令，用于根据表达式的真假决定是否渲染DOM元素。如果表达式为真，则渲染对应的元素；如果为假，则从DOM中移除对应的元素。 3. v-bind：v-bind是Vue.js中的一个属性绑定指令，用于动态地将数据绑定到HTML元素的属性上。它可以用来绑定元素的任意属性，例如class、style、src等。通过v-bind指令，可以根据Vue实例中的数据动态更新HTML元素的属性值。 4. v-for：v-for是Vue.js中的一个列表渲染指令，用于根据数据源循环渲染DOM元素。它可以遍历数组或对象，并为每个项生成对应的DOM元素。我们可以使用v-for指令来遍历数组、对象或数字范围。 5. v-show：v-show是Vue.js中的一个条件展示指令，用于根据表达式的真假决定元素的显示和隐藏。如果表达式为真，则元素显示；如果为假，则元素隐藏。与v-if不同，v-show仅仅是通过修改元素的CSS属性来控制显示与隐藏，元素始终保留在DOM中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值