Vue常用指令

最新推荐文章于 2023-08-18 16:57:00 发布
最新推荐文章于 2023-08-18 16:57:00 发布
阅读量1.8k 收藏 9
点赞数 9
分类专栏： Vue 文章标签： java vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wengeaiyuanyuan/article/details/106660697
版权

文章目录

Vue常用指令

vue.js官方给自己的定为是数据模板引擎，并给出了一套渲染数据的指令.

  • v-if
  • v-show
  • v-for
  • v-text
  • v-html
  • v-clock
  • v-bind
  • v-on
  • v-model

v-if,v-show指令

v-if = “expression” : 根据表达式的真假来删除和插入元素
v-show = “expression” : 不会每次都去删除和创建DOM元素 , 而是通过dispaly:none将元素隐藏起来

v-if 例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue-->
    <script src="lib/vue-2.4.0.js"></script>
    <!--引入layui-->
    <script src="layui/layui.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css">

</head>
<body>
<div id="app">
    <span v-if="flag">显示</span>
    <button @click="changeData" class="layui-btn">点击</button>
</div>

</body>

<script>
    let app = new Vue({
        el: "#app",
        data: {
            flag: true
        },
        methods: {
            changeData() {
                this.flag=!this.flag;
            }
        }
    })
</script>
</html>

v-show例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue-->
    <script src="lib/vue-2.4.0.js"></script>
    <!--引入layui-->
    <link rel="stylesheet" href="layui/css/layui.css">


</head>
<body>
<div id="app">
    <span v-show="flag">显示</span>
    <button @click="changeData" class="layui-btn layui-icon layui-icon-logout">点击</button>
</div>

</body>
<script src="layui/layui.js"></script>
<script>

    let app = new Vue({
        el: "#app",
        data: {
            flag: true
        },
        methods: {
            changeData() {
                this.flag=!this.flag;
            }
        }
    })
</script>
</html>

v-for指令

v-for = “item in items” : 基于一个数组渲染一个列表

v-for是Vue中的遍历（循环）指令。

(item,index) in dataList,item是遍历的每一项名称，index是每一项的索引值

索引值：{{index}}---数据：{{item}}

索引值：{{i}}--id：{{obj.id}}--name：{{obj.name}}

这是第{{count}}次循环，索引为{{index}}

key是在v-for中表示唯一标识，在任何的v-for中建议都加上key。key一定要保证唯一性

例子

<!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">
  <script src="./lib/vue-2.4.0.js"></script>
</head>
<style>
  .red {
    color: red;
  }

  .size {
    font-size: 20px;
  }

  .back {
    background-color: green;
  }
</style>

<body>

  <div id="app">
    <!-- v-for是vue中的遍历（循环）指令。(item index) in data，item是遍历的每一项名称，index是每一项的索引值 -->
    <!-- <p v-for="(item, index) in simpleList">索引值：{{index}}---数据：{{item}}</p> -->
    <!-- <p v-for="(obj, i) in objectList">索引值：{{i}}--id：{{obj.id}}--name：{{obj.name}}</p> -->
    <!-- <p v-for="(count, index) in 10">这是第{{count}}次循环，索引为{{index}}</p> -->

    <div>
      <input type="text" v-model="id">
      <input type="text" v-model="name">
      <button @click="add">添加</button>
	
    </div>

    <!-- key是在v-for中表示唯一标识，在任何的v-for中建议都加上key。key一定要保证唯一性 -->
    <p v-for="item in objectList" :key="item.id">
      <input type="checkbox" name="" id=""> {{item.id}} --- {{item.name}}
    </p>
  </div>

  <script>

    var vue = new Vue({
      el: '#app',
      data: {
        simpleList: [1, 2, 3, 4, 5, 6],
        objectList: [
          { id: 1, name: '张三' },
          { id: 2, name: '李四' },
          { id: 3, name: '王五' },
          { id: 4, name: '赵六' }
        ],
        id: '',
        name: '',
      },
      methods: {
        add() {
          const obj = {id: this.id, name: this.name}
          this.objectList.unshift(obj)
        }
      }
    })

  </script>
</body>

</html>

v-text,v-html,v-clock指令

v-text：会覆盖原有标签中的内容，将data中的数据作为字符串处理

v-html: 会将data作为html标签去渲染

v-clock: 占位符指令，会替换掉自己的这个占位，不会把整个元素清空

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue-->
    <script src="lib/vue-2.4.0.js"></script>
    <!--引入layui-->
    <link rel="stylesheet" href="layui/css/layui.css">


</head>
<body>
<div id="app">
    <div v-clock>{{msg1}},你好</div>
    <div v-text="msg">你好</div>
    <div v-html="msg2">你好</div>
</div>
</body>
<script src="layui/layui.js"></script>
<script>

    let app = new Vue({
        el: "#app",
        data: {
            msg: "我是text",
            msg1: "我是clock",
            msg2: "<span style='color: red'>我是html</span>"
        },
    })
</script>
</html>

页面展示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9wgZfpEi-1591757039890)(en-resource://database/498:1)]

v-bind,v-on指令

v-bind：Vue中提供用户绑定属性的指令，也可以写成：
v-on：Vue提供的事件绑定指令，也可以简写成@

例子

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue-->
    <script src="lib/vue-2.4.0.js"></script>
    <!--引入layui-->
    <link rel="stylesheet" href="layui/css/layui.css">


</head>
<body>
<div id="app">
    <a v-bind:href="msg">按钮</a>
    <button v-on:click="add" class="layui-btn">点击</button>
</div>
</body>
<script src="layui/layui.js"></script>
<script>
layui.use(["layer"],function () {
    let app = new Vue({
        el: "#app",
        data: {
            msg: "www.baidu.com",
        },
        methods:{
            add(){
                layer.alert("123");
            }
        }

    })
})

</script>
</html>

v-model指令

v-model : 数据的双向绑定 , 只能用于表单元素. 一方被修改之后另一方也会同步修改
v- bind : 数据的单向绑定. 当model中数据被修改是 , bind绑定的数据会被修改. 而bind绑定的位置改变model则不会被修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入vue-->
    <script src="lib/vue-2.4.0.js"></script>
    <!--引入layui-->
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<div id="app">
    <input type="text" v-model="msg">
    <input type="text" :value="msg1">

</div>

</body>
<script src="layui/layui.js"></script>
<script>
    layui.use(['layer'], function () {
        let app = new Vue({
            el: "#app",
            data: {
                msg: "v-model的值",
                msg1: "V-bind的值"
            },
            methods: {}

        })
    })

</script>
</html>
_曹家三少
关注
  • 9
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue常用指令代码实例总结
12-20
vue常用内置指令 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>12_指令_内置指令</title> <style> [v-cloak] { display: none } </...
layui中使用vue，如果用layui的初始赋值绑定失效问题
qq_14853875的博客
01-01 1916
如果在layui的相关节点中加了vue判断条件，那么layui给表单初始赋值的操作会失效。 下面红框里面的是错误的，如果去掉v-if="user!=null"那么即可用layui的初始赋值。 配合下面绿框看 ...
layui中的if(){}else if{} else{}
屿汐学长的博客
01-27 904
{{# if (d.sex=== 0) { }} <span>男</span> {{# } else if(d.sex === 1) { }} <span>女</span> {{# } else { }} <span>未知</span> {{# } }}
layui中if(){}else if{} else{}
hen12的博客
06-29 1045
layui利用if(){}else if{} else{}根据状态跳转不同页面
layui循环数据并渲染_Vue 3 列表渲染
weixin_39608559的博客
12-12 1113
列表渲染实验介绍列表渲染，其实给人的感觉就是 JavaScript 中的 for 循环，只不过将其提取到 HTML 模板层面了，将其指令化，本质还是 for 循环。用 v-for 把一个数组对应为一组元素我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数...
Vue v-on v-if v-else-if v-else 使用场景 以及修饰符
Z13955558735的博客
05-24 219
1.v-on 参数使用 <div id="app"> <button @click="btn">+</button> <!-- PointerEvent undefined --> <button @click="btn()">+</button> <!-- undefined undefined --> <button @click="b
Vue常用指令详解分析
10-18
给大家详细分析了关于VUE的常用的相关指令内容，对此有需要的朋友们可以学习下。
Vue常用的几个指令附完整案例
10-17
越来越多的人在用Vue，刚开始接触vue的话常接触的指令就几个，统一归纳一下。感兴趣的朋友跟随小编一起看看吧
日常笔记：vue的v-for添加layui的checkbox，并设置默认值
a806488840的博客
07-08 852
1.首先需要注意的是要给layui的checkbox绑定v-model需要v-model的值为数组。 <div id="vm"> <div class="layui-form-item flex-item"> <div class="layui-inline"> <label class="layui-form-label layui-required">xx情况:</label>
vue项目中使用v-for动态渲染时layui的表单开关无法正常显示问题解决
qq_19318117的博客
04-23 1161
1.检查外层div是否有class=“layui-form”,或者class包含layui-form的，例如<table class="layui-table layui-form">这样.因为官方文档中确实描述了： 2.如果class没有问题，那么就要从vue渲染的角度去考虑了，在网上搜索了很多大佬的博客，发现问题在Vue updated生命周期函数：（以下是大佬的理论性解答） 由...
layui导航栏不跳转切换内容_Vue实战029:功能完善的响应式导航设计详解
weixin_39957027的博客
12-03 1474
最近接受的新案子bug有点多，天天在忙着修改bug，导致更新有点慢了。。。抽空写了个响应式的导航，个人觉得功能比较完善，有兴趣的可以一起探讨本导航主要实现了以下功能：1.自适应浏览器窗口大小，支持pc、pad、phone等设备web浏览2.导航栏顶部与侧边自动切换，768以下屏幕自动显示侧边导航，以上则显示顶部导航3.本导航支持主菜单+子菜单4.搜索样式切换，可以点击搜索展开/收起搜索框，当屏幕小...
vue指令
fake_8的博客
12-09 2487
vue指令
vue常用指令
热门推荐
jayLog的博客
01-29 2万+
vue2.x的常用指令。篇幅简短，易懂
【Vue 学习】常用指令
不谷的博客
03-15 748
【Vue 学习】常用指令
Vue常用指令+用法举例 详解
m0_69287579的博客
08-18 2084
有：v-on指令、v-model指令、v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-text指令、v-html指令、v-bind指令等等。vue中双向绑定是一个指令v-model，可以绑定一个动态值到视图，同时视图中变化能改变该值。可以单独使用，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。v-if和v-show有同样的效果，不同在于。v-for可用来遍历数组、对象、字符串。
vue指令大全
qq_43235503的博客
04-13 1525
vue指令大全
总结vue中的常用指令
Xwz的博客
04-10 1261
1.v-model 指令用于表单输入，实现表单控件和数据的双向绑定。一般在 <input>、<select>、<textarea>、组件中使用。 <body> <div id="app"> <div>val的值:{{val}}</div> <input v-model="val"> </div> </body> <script&g
Vue常用指令大全（详解）
m0_69057918的博客
01-12 1238
Vue常用指令说明及使用，通过Vue指令操作本地数据（详解）
vue常用指令修饰符
最新发布
08-29
Vue常用的指令修饰符有以下几种： 1. `.prevent`：阻止默认事件的触发。例如，`@click.prevent`会阻止点击事件的默认行为。 2. `.stop`：停止事件冒泡。它会阻止事件进一步传播到父元素。例如，`@click.stop`会停止点击事件的冒泡。 3. `.capture`：添加事件侦听器时使用捕获模式，即在父元素上触发事件之前捕获它。例如，`@click.capture`会在父元素上触发点击事件之前捕获它。 4. `.self`：只触发元素自身的事件，不包括子元素的事件。例如，`@click.self`只会在元素自身被点击时触发，而不会在子元素被点击时触发。 5. `.once`：只触发一次事件。例如，`@click.once`只会在首次点击时触发，之后再次点击不会触发。 6. `.passive`：设置事件监听器时，指示浏览器不要阻止默认滚动行为。它可以提高滚动的性能。例如，`@scroll.passive`可以优化滚动性能。 这些指令修饰符可以与Vue的指令一起使用，例如`v-on`指令（简写为`@`）和`v-bind`指令（简写为`:`）等。它们可以增强指令的功能，提供更加灵活和精确的事件处理方式。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值