Vue常用指令及实例

*猪耳朵*

已于 2022-04-06 16:21:37 修改

阅读量8.3k

点赞数

分类专栏： JavaWeb 文章标签： vue javascript js

于 2020-08-03 18:25:57 首次发布

本文链接：https://blog.csdn.net/cjw12581/article/details/107769410

版权

JavaWeb 专栏收录该内容

72 篇文章 19 订阅

订阅专栏

在这里插入图片描述

常用指令

指令	作用
v-model	数据双向绑定，用于实现表单输入和应用状态数据绑定
v-bind	数据单向绑定，用于动态改变标签内的属性，可简写用：代替
v-text	用于更新标签包含的文本，它的作用跟双大括号{{}}效果是一样，当于innerText
v-on	监听 DOM 事件，并在触发时运行一些 JavaScript 代码,通过v-on指令修饰click点击事件,可简写用@代替
v-show	前端样式块、元素在指令的表达式返回 true值的时候被渲染，不会重新进行DOM的删除和创建操作，只切换了元素的 display:none 样式
v-if	前端样式块、元素在指令的表达式返回 true值的时候被渲染，会重新进行DOM的删除和创建操作
v-for	相当于JS中的for in循环, 可以根据数据多次渲染元素
v-else	和v-if指令搭配使用，没有对应的值。当v-if的值false，v-else才会被渲染出来
v-once	界面不跟数据变化，只渲染一次
v-cloak	数据渲染后自动显示元素，可以解决插值表达式闪烁的问题
v-html	相当于innerHTML，绑定一些包含html代码的数据在视图上

应用实例

v-model及其修饰符：
v-model指令，可以实现表单元素和 Model 中数据的双向绑定，v-model 只能用在表单元素中。

<!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>
  <script src="vue.min.js"></script>
</head>
<body>
  <div id="app">
    <h3>v-model基本用法</h3>
    <input type="text" v-model="msg">
    <!-- HTML默认再多空格也只显示一个空格,因此我们在输入框中输入很多空格再输入内容时，下面显示的也看不出来空格-->
    <p>{{msg}}</p>
    <!-- 被包围在 pre 元素中的文本通常会保留空格和换行符。 这时在输入框中输入很多空格再输入内容时，空格都显示-->
    <pre><p>{{msg}}</p></pre>
 
    <h3>v-model修饰符</h3>
 
    <h4>v-model.lazy</h4>
    <p>只有在input输入框发生一个blur事件（失去焦点）时才触发，enter键也可以让输入框失去焦点</p>
    <input type="text" v-model.lazy="msg1">
    <p>{{msg1}}</p>
 
    <h4>v-model.trim</h4>
    <p>将用户输入的前后的空格去掉</p>
    <input type="text" v-model.trim="msg2">
    <p>{{msg2}}</p>
 
    <h4>v-model.number</h4>
    <p>默认输入的数字是字符串类型的;使用v-model.number，当输入数字时，将字符串转换成number类型</p>
    <input type="text" v-model.number="msg3">
    <p>{{msg3}}</p>
  </div>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '数据双向绑定',
        msg1: '.lazy',
        msg2: '.trim',
        msg3: '.number'
      }
    });
  </script>
</body>
</html>

v-text:

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

v-if、v-else、v- else-if：

<div id="app">
    <p v-if="score >= 80">优秀</p>
   <p v-else-if="score >= 60">良好</p>
   <p v-else>差</p>
   </div>
   <script>
   let vue = new Vue({
       el:"#app",
       data:{//v-if从模型中获取数据
           show:true,
           hidden:false,
           age:18,
           score:60
       }
   });
</script>

v-if、v-show、v-bind（单向绑定）：

<div class="progress progress-striped" v-show="isShow">
				<div class="progress-bar progress-bar-info" :style="{width:prc+'%'}">
					<b class="font-light">{{prc}}%</b>
				</div>
			</div>

v-if和v-show区别？

v-if: 只要取值为false就不会创建元素
v-show: 哪怕取值为false也会创建元素,只是如果取值是false会设置元素的display为none。
所以: 如果企业开发中需要频繁切换元素显示隐藏, 那么推荐使用v-show, 否则使用v-if。

v-on：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <!--v-on: Vue中的事件绑定机制-->
        <input type="button" value="按钮1" v-on:click="show"/>
        <!-- v-on: 指令可以简写为  @要绑定的事件-->
        <input type="button" value="按钮2" @click="show"/>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '天天向上'
            },
            // methods属性中定义当前Vue实例中所有可用的方法
            methods: {
                show: function () {
                    alert('hello!');
                }
            }
        });
    </script>
</body>
</html>

v-for：
用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
v-for循环的时候，key属性只能使用number或string类型，key使用时，必须使用v-bind属性绑定的形式，指定key的值。
在组件中，使用v-for循环的时候，或是在一些特殊情况下，如果v-for有问题，那么必须在使用的时候，指定唯一的字符串或数字类型为key的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for使用时绑定key值</title>
    <script src="lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 指定每一项的key值为id的值 -->
        <p v-for="item in list" :key="item.id">id: {{item.id}}===name: {{item.name}}</p>
    </div>
 
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                list: [
                    {id: 1, name: 'name1'},
                    {id: 2, name: 'name2'},
                    {id: 3, name: 'name3'},
                    {id: 4, name: 'name4'},
                    {id: 5, name: 'name5'},
                ]
            },
            methods: {}
        });
    </script>
</body>
</html>

v-bind:
专门用于给"元素的属性"绑定数据。

格式一：v-bind:属性名称="绑定的数据"
<input type="text" v-bind:value="gender">
格式二：:属性名称="绑定的数据"
<input type="text" :value="name">

v-clock、v-html、v-text:
v-cloak 可以解决 v-text（ {{}} ）闪烁的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <!--插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空-->
        <!-- v-cloak 可以解决 插值表达式闪烁 的问题-->
        <p v-cloak>======{{msg}}======</p>
        <!--默认v-text是没有闪烁问题的-->
        <!--v-text会覆盖元素中原本的内容-->
        <h2 v-text="msg">===========</h2>
        <!--v-html输出带标签效果-->
        <div v-text="msg2">=========</div>
        <div v-html="msg2">=========</div>
    </div>
 
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: '好好学习',
                msg2: '<h1>天天向上</h1>'
            }
        })
    </script>
 
</body>
</html>

链接: vue常用的指令实例
链接: Vue教程

END

*猪耳朵*

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue常用指令及实例

常用指令指令作用v-model数据双向绑定，用于实现表单输入和应用状态数据绑定v-bind数据单向绑定，用于动态改变标签内的属性，可简写用：代替v-text用于更新标签包含的文本，它的作用跟双大括号{{}}效果是一样，当于innerTextv-on监听 DOM 事件，并在触发时运行一些 JavaScript 代码,通过v-on指令修饰click点击事件,可简写用@代替v-show前端样式块、元素在指令的表达式返回 true值的时候被渲染，不会重新进
复制链接

扫一扫