vue--常用指令

Posted zouzou-busy

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue--常用指令相关的知识,希望对你有一定的参考价值。

安装

官网:https://cn.vuejs.org/

下载:https://cn.vuejs.org/v2/guide/installation.html

直接通过script在head标签里导入就可以了

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

或者通过CDN的方式直接引用

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

模版语法

大家都知道django里的模版语法是{{  }},事情总是巧合的,Vue里的模版语法也是{{ }}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <title>Title</title>
<!--    引用vue-->
    <script src="../static/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!--  模版语法-->
        <h1>{{ msg }}</h1>
    </div>
    <script>
        // 实例化对象
        new Vue({
            el:"#app", // 固定写法el,查找的元素
            data:{   // 固定写法,是个object,里面放的数据
                msg:"hello vue"  // 数据,前面的为模版里放的变量名,后面为对应的数据
            }
        })
    </script>
</body>
</html>

上面使用的是vue的方法查找id为app的属性,并将里面的文本替换为“hello vue”

指令

指令就是帮我们渲染数据的,语法:v-指令

上面的代码我们可以用指令v-text来实现

v-text

v-text相当于innerText,v-html相当于innerHTML,其实和上面的模版语法效果一样
data中是一个函数,函数中return一个对象,可以是空对象,但不能return
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <title>Title</title>
<!--    引用vue-->
    <script src="../static/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!--  模版语法-->
        <h1 v-text="msg"></h1>  <!--  写在标签里面-->
    </div>
    <script>
        // 实例化对象
        new Vue({
            el:"#app", // 固定写法el,查找的元素
            data(){
                return {
                    msg:"<h2>hello vue</h2>"
                }
            }
        })
    </script>
</body>
</html>
上面的将msg的内容原样显示在了页面上,没有当成标签渲染后显示,如果要渲染后显示在页面上,就要用到v-html了

v-html

v-text相当于innerText,v-html相当于innerHTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <title>Title</title>
<!--    引用vue-->
    <script src="../static/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!--  模版语法-->
        <h1 v-html="msg"></h1>  <!--  写在标签里面-->
    </div>
    <script>
        // 实例化对象
        new Vue({
            el:"#app", // 固定写法el,查找的元素
            data(){  <!--data中是一个函数,函数中return一个对象,可以是空对象,但不能return-->
                return {
                    msg:"<h2>hello vue</h2>"
                }
            }
        })
    </script>
</body>
</html>

v-for

v-for可以迭代数组和迭代对象

v-for迭代数组
  • 语法:v-for="(alias,index) in array"
  • 说明:alias是数组迭代的别名,index数组索引值,从0开始(可选,如果有就要加小括号)
v-for迭代对象的属性
  • 语法: v-for=“(value,key,index) in object”
  • 说明:value每个对象的属性值,key为属性名(可选),index为索引(可选)
<!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">
        <h3>1.迭代数组</h3>
        <ul>
            <!-- e 代表的是emps数组的别名,index 数组下标,从0开始 的 
            注意:使用 key 特殊属性, 它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素    
                可以使用of或者in作为分隔符
        -->
            <li v-for="(e, index) of emps" :key="index">
               编号:{{index+1}},姓名: {{e.name}} , 工资 :{{e.salary}}
            </li>
        </ul>


        <h3>2.迭代对象</h3>
        <ul>
            <!-- value对应是的对象的属性值,key就是对象的属性名,index索引值 -->
            <li v-for="(value, key, index) in person">
                第{{index+1}}个属性为:{{key}} =  {{value}}
            </li>
        </ul>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: #app,
            data: {
                emps: [
                    {name: 马云, salary: 20000},
                    {name: 马化腾, salary: 18000},
                    {name: 东哥, salary: 13000}
                ],
                person: {
                    name: 小梦,
                    age: 18
                }
            }
        })
    </script>
</body>
</html>

结果:

技术图片

列表

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <title>Title</title>
  
    <script src="../static/vue.min.js"></script>

</head>
<body>

   <div id="app">
       <ul>
           <li v-for="student in students">{{student}}</li>
       </ul>
   </div>
   <script>
       new Vue({
           el:"#app",
           data:{
               students: ["张三","李四","王五"]
           }
       })
   </script>
</body>
</html>

字典

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <title>Title</title>
  
    <script src="../static/vue.min.js"></script>

</head>
<body>

   <div id="app">
       <ul>
           <li v-for="student in students">姓名:{{student.name}},年龄:{{student.age}},职业:{{student.job}}</li>
       </ul>
   </div>
   <script>
       new Vue({
           el:"#app",
           data:{
               students: [
                {
                   name:"张三",
                   age: 25,
                   job:"test"
               },
                {
                   name:"李四",
                   age: 56,
                   job:"IT"
               },
               {
                   name:"王五",
                   age: 85,
                   job:"dev"
               }
           ]
       }})
   </script>
</body>
</html>

v-if

v-if是否渲染当前元素,v-show 与v-if类似,只是元素始终会被渲染并保留在DOM中,只是简单切换元素的CSS属性display来显示或隐藏

案例

技术图片

<!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="./node_modules/vue/dist/vue.js"></script>
    <style>
        .box{
            height: 200px;
            width: 200px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <input v-model="seen" type="checkbox" name="" id="">勾选后显示红色小块
        <div v-if="seen" class="box"> </div>
        <p v-else>红色小块隐藏了</p>
    </div>
    
    <script>
        new Vue({
            el: "#app",
            data: {
                seen: false,
            }
        })
    </script>
</body>
</html>

v-show

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <title>Title</title>
<!--    引用vue-->
    <script src="../static/vue.min.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="content">
    <button v-on:click=‘handlerClick‘>隐藏</button>
    <div class="box" v-show=‘isShow‘></div>

</div>

<script>
    //数据驱动视图
    new Vue({
        el: #content,
        data() {
            //data中是一个函数 函数中return一个对象,可以是空对象 但不能不return
            return {
                msg: "<h2>alex</h2>",
                num: 1,
                isShow: true
            }
        },
        methods: {
            
            handlerClick() {
                //数据驱动
                console.log(this);
                this.isShow = !this.isShow;  //取反

            }
        }
    })
</script>
</body>
</html>

 

当第一次点击隐藏按钮的时候,isShow变为false,隐藏红色的框(加了个样式,display: none;)。当第二次点击的时候,因为isShow为fasle,所以取反之后变为true,显示红色的框

v-show要使用methods里的函数

当isshow为false的时候,页面的html是通过display:none,把内容隐藏了

切换性能:

v-show的切换性能高一些,display: none,  v-if的切换是通过append

加载性能:

v-show的慢,v-if的快

v-on

点击事件,要写在methods里面

事件处理方法
  • 完整格式:v-on:事件名=“函数名” 或 v-on:事件名="函数名(参数...)"
  • 缩写格式:@事件名="函数名" 或 @事件名="函数名(参数)"    注意@后面没有:
  • event:函数中的默认形参,代表原生DOM事件,当调用的函数有多个参数传入时,需要使用原生DOM事件,则通过$event作为实参传入,用于监听DOM事件
<!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">
        <h3>1. 事件处理方法 v-on 或 @</h3>
        <button v-on:click="say">Say {{msg}}</button>
        <!-- $event代表的是原生 的Dom事件 -->
        <button @click="warn(‘hello‘, $event)">Warn</button>


    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: #app,
            data: {
                msg: Hello World!!,
                num: 0
            },
            methods: { //定义事件处理函数
                say: function (event) {
                    // event代表的是Dom原生事件, Vue.js它会自动 的将它传入进来,
                    alert(this.msg)
                    alert(event.target.innerHTML)
                },
                warn: function (name, event) {
                    //如果说函数有多个参数,而双需要使用原生事件,则需要使用 $event 作为 参数传入
                    alert(name + , + event.target.tagName)
                }
            }
        })
    
    </script>
</body>
</html>
事件修饰符
  • .stop阻止单击事件继续传播
  • .prevent阻止事件默认行为
  • .once点击事件只会触发一次
<!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">
    

        <h3>2. 事件修饰符</h3>
        <!-- 2.1 防止单击事件继续传播 -->
        <div @click="todo">  <!-- 点击doThis之后还会触发todo事件 -->
            <button @click="doThis">单击事件会继续传播</button>
        </div>
        <br>


        <div @click="todo">
            <!-- .stop作用:是阻止事件的传播,点击doThis之后不会触发todo事件 -->
            <button @click.stop="doThis">阻止单击事件会继续传播</button>
        </div>
        <br>

        <!-- 2.2 阻止事件的默认行为,不加prevent会跳转到百度 -->
        <a href="http://www.baidu.com" @click.prevent="doStop">百度</a>

        <!-- 2.3 点击事件只会触发一次 -->
        <button @click.once="doOnly">点击事件只会触发一次:{{num}}</button>

    
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: #app,
            data: {
                num: 0
            },
            methods: { //定义事件处理函数
                
                doThis: function () {
                    alert(doThis....)
                },
                todo: function () {
                    alert(todo....)
                },
                doStop: function () {
                    alert(doStop...href默认行为已经被阻止)
                },
                doOnly: function () {
                    this.num ++ 
                }
            },
        })
    
    </script>
</body>
</html>
按键修饰符
  • 格式: v-on:keyup.按键名 或 @keyup.按键名
  • 常用按键名
    •   .enter   .tab   .delete    .esc    .space    .up    .down    
<!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">
        
        <h3>按键修饰符或按键码</h3>
        <!-- 回车键可以用做提交表单数据,比如搜索框 -->
        <input type="text" @keyup.enter="keyEnter">

        <input type="text" @keyup.space="keySpace">

        <input type="text" @keyup.13="keyCode">
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: #app,
           
            methods: { //定义事件处理函数

                keyEnter: function () {
                    alert(当前按的是回车键)
                },
                keySpace: function() {
                    alert(当前按的是空格键)
                },
                keyCode: function () {
                    alert(按的是13)
                }
            },
        })
    
    </script>
</body>
</html>

例子二

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <title>Title</title>
  
    <script src="../static/vue.min.js"></script>
    <style>
         .active{
                 color: red;
                  }
    </style>
</head>
<body>

   <div id="app">
        <h1 :class="{active: isActive}">钢铁侠</h1>  <!-- 添加class属性为active -->
        <button v-on:click="ChangeColor">点我让钢铁侠变红</button>
   </div>
   <script>
        new Vue({
           el:"#app",
           data:{
               isActive: false
           },
            methods:{
               ChangeColor:function () {
                   this.isActive = !this.isActive; // 取反
               },
            }
           }
               )
   </script>
</body>
</html>

v-bind

通过class列表和style指定样式是数据绑定的一个常见需求,他们都是元素的属性,都用v-bind处理,其中表达式结果的类型可以是:字符串,对象或数组

语法格式

  • v-bind:class="表达式" 或 :class="表达式"

class的表达式可以为:

  • 字符串  :class="activeClass"
  • 对象  :class="{active:isActive,error:hasError}"
  • 数组 :class="[‘active‘,‘error‘]"   注意要加上单引号,不然获取的是data中的值

style的表达式一般为对象

  • :style="{color:activeColor,fontSize+‘px‘}"
  • 注意:对象中的value值activeColor和fontSize是data中的属性

例子一:

<!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="./node_modules/vue/dist/vue.js"></script>
    <style>
        .active{
            color:green;
        }
        .delete{
            background: red;
        }
        .error{
            font-size: 35px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h3>Class绑定,v-bind:class 或者 :class</h3>
        <!-- <p class="active">字符串表达式</p>  -->
        <p v-bind:class="activeClass">字符串表达式</p>

        <!-- key值是样式名,value是data中绑定的属性 -->
        <!-- 当isDelete为true的时候,delete就会进行渲染 -->
        <p :class={delete:isDelete,error:hasError}> 对象表达式</p>

        <p :class="[‘active‘,‘error‘]">数组表达式</p>

        <h3>Style绑定,v-bind:style 或 :style</h3>
        <p :style="{color: activeColor, fontSize: fontSize + ‘px‘}">Style绑定</p>

    </div>
    
    <script>
       new Vue({
           el: "#app",
           data: {
               activeClass: active,
               isDelete: false,
               hasError: true,
               activeColor: red,
                fontSize: 100
           }
       })
        
    </script>
</body>
</html>

例子二:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <title>Title</title>
<!--    引用vue-->
    <script src="../static/vue.min.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .active{
            background-color: green;
        }

    </style>
</head>
<body>
   <div id="app">
    <button v-on:click = ‘handlerChange‘>切换颜色</button>
   <!--v-bind 标签中所有的属性 img标签src alt,a标签的href title id class-->
    <img v-bind:src="imgSrc" v-bind:alt="msg">
    <div class="box" v-bind:class = ‘{active:isActive}‘></div>

</div>
<script>

    new Vue({
        el: #app,
        data() {
            return {
                imgSrc:./1.jpg,
                msg:美女,
                isActive:true
            }
        },
        methods:{
            handlerChange(){
               this.isActive = !this.isActive;

            },

        }

    })
</script>
</body>
</html>
<div class="box" v-bind:class = ‘{active:isActive}‘></div>
div原来有一个class属性,值只有一个box,通过v-bind绑定了一个属性active,isActive为true时把active添加到class里,为false时不添加

<button v-on:click = ‘handlerChange‘>切换颜色</button>
绑定了一个v-on的click事件,当第一次点击按钮时,去methods里找handlerChange,因为刚开始isActive为true(data里),点击后取反为false,
这时data里的也为false,所以没有active属性
v-on和v-bind的简写

v-bind可以简写为 : v-on可以简写为@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <title>Title</title>
<!--    引用vue-->
    <script src="../static/vue.min.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .active{
            background-color: green;
        }

    </style>
</head>
<body>
   <div id="app">
     <button @mouseenter = ‘handlerChange‘ @mouseleave = ‘handlerLeave‘>切换颜色</button>
   <!--v-bind 标签中所有的属性 img标签src alt,a标签的href title id class-->
    <img :src="imgSrc" :alt="msg">
    <div class="box" :class = ‘{active:isActive}‘></div>
</div>

<script>

//    v-bind和v-on的简便写法 :  @
    new Vue({
        el: #app,
        data() {
            return {
                imgSrc:./1.jpg,
                msg:美女,
                isActive:true
            }
        },
        methods:{
            handlerChange(){
                this.isActive = false;
            },
            handlerLeave(){
                this.isActive = true;
            }
        }

    })
</script>
</body>
</html>

v-model

双向绑定,当用户输入的时候,改变原来的值,只能应用在像input,textare,select之类的标签

 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="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
        <div id="demo">
                <!-- @submit.prevent 阻止事件的默认行为,当前阻止的是action行为 -->
            <form action="#" @submit.prevent="submitForm">
                姓名(文本):<input type="text" v-model="name">
                <br><br>
    
                性别(单选按钮):
                    <input name="sex" type="radio" value="1" v-model="sex"/><input name="sex" type="radio" value="0" v-model="sex"/><br><br>
    
                技能(多选框):
                    <input type="checkbox" name="skills" value="java" v-model="skills">Java开发
                    <input type="checkbox" name="skills" value="vue" v-model="skills">Vue.js开发
                    <input type="checkbox" name="skills" value="python" v-model="skills">Python开发
                <br><br>
    
                城市(下拉框):
                <!-- 绑定在select上才会默认选中 -->
                <select name="citys" v-model="city">  
                    <option v-for="c in citys" :value="c.code">
                        {{c.name}}
                    </option>
                </select>
                <br><br>
    
                说明(多行文本):<textarea cols="30" rows="5" v-model="desc"></textarea>
                <br><br>
                <button type="submit" >提交</button>
            </form>
        </div>

        
        <script>
            new Vue({
                el: #demo,
                data: {
                    name: ‘‘,
                    sex: 1,   //默认选中的是 男
                    skills: [vue, python], //默认选中 Vue.js开发 、Python开发
                    citys: [
                        {code: bj, name: 北京},
                        {code: sh, name: 上海},
                        {code: gz, name: 广州}
                    ],
                    city: sh, // 默认选中的城市:上海
                    desc: ‘‘
                },
                methods: {
                    submitForm: function () { //处理提交表单
                        //发送ajax异步处理
                        alert(this.name + ,  + this.sex + ,  + this.skills +  ,  + this.city + ,  + this.desc)
                    }
                }
            })
        </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>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- {{}}用于标签体内显示数据 -->
        hello,{{ msg }}
        <br>
        <!-- v-model进行数据的双向绑定 -->
        <input type="text" v-model="msg">
    </div>

    
    <script >
        new Vue({
            el: "#app",  //指定被Vue管理的入口, 值为选择器, 不可以指定body或者是html
            data: {    // 用于初始化数据,在Vue实例管理的Dom节点下,可通过模板语法来引用
                msg: "vue.js"  
            }
        })
    </script>
    
</body>
</html>

 会把msg的信息显示在输入框和div标签里,更改输入框里的数据,div里的也会跟着改,所以叫双向数据绑定

计算属性 

computed 选项定义计算属性

计算属性 类似于  methods 选项中定义的函数

  • 计算属性 会进行缓存,只在相关响应式依赖发生改变时它们才会重新求值。
  • 函数 每次都会执行函数体进行计算。

输入数学与英语分数,采用  methods 与  computed 分别计算出总得分

<!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="mathScore">
        英语:<input type="text" v-model="englishScore"><br>
        <!-- v-model调用函数时,不要少了小括号 -->
        总得分(函数-单向绑定):<input type="text" v-model="sumScore()"><br>
        <!-- 绑定计算属性后面不加上小括号 -->
        总得分(计算属性-单向绑定):<input type="text" v-model="sumScore1"><br>
        总得分(计算属性-双向绑定):<input type="text" v-model="sumScore2">



    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        /* 
        1. 函数没有缓存,每次都会被调用
        2. 计算属性有缓存 ,只有当计算属性体内的属性值被更改之后才会被调用,不然不会被调用
        3. 函数只支持单向
        4. 计算属性默认情况下:只有getter函数,而没有setter函数,所以只支持单向
            如果你要进行双向,则需要自定义setter函数
        */
        var vm = new Vue({
            el: #app,
            data: {
                mathScore: 80,
                englishScore: 90,
            
            },

            methods: {
                sumScore: function () { //100
                    console.log(sumScore函数被调用)
                    // this 指向的就是 vm 实例 , 减0是为了字符串转为数字运算
                    return (this.mathScore-0) + (this.englishScore-0)
                }
            },

            computed: { //定义计算属性选项
                //这个是单向绑定,默认只有getter方法
                sumScore1: function () { //计算属性有缓存,如果计算属性体内的属性值没有发生改变,则不会重新计算,只有发生改变 的时候才会重新计算
                    console.log(sumScore1计算属性被调用)
                    return (this.mathScore-0) + (this.englishScore-0)
                },

                sumScore2: { //有了setter和getter之后就可以进行双向绑定
                    //获取数据
                    get: function() {
                        console.log(sumScore2.get被调用)
                        return (this.mathScore-0) + (this.englishScore-0)
                    },
                    //设置数据, 当 sumScore2 计算属性更新之后 ,则会调用set方法
                    set: function(newValue) { // newVulue 是 sumScore2 更新之后的新值
                        console.log(sumScore2.set被调用)
                        var avgScore = newValue / 2
                        this.mathScore = avgScore
                        this.englishScore = avgScore
                    }
                }
            },
            
        })

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

computed 选项内的计算属性默认是 getter 函数,所以上面只支持单向绑定,当修改数学和英语的数据才会更新总分,而修改总分不会更新数据和英语

 

如果是用户输入的,那会直接拼接起来,因为用户输入的数字也会被当成字符串。可以使用number来解决这个问题

<td><input type="text" v-model.number="python" /></td>
<td><input type="text" v-model.number="vue"></td>
<td><input type="text" v-model.number="selenium"></td>

上面当我们输入时,vue会监听我们输入的内容,这样大大降低了性能,我们可以使用lazy,当失去光标的时候再执行

<td><input type="text" v-model.number.lazy="python" /></td>
<td><input type="text" v-model.number.lazy="vue"></td>
<td><input type="text" v-model.number.lazy="selenium"></td>

 实战

图片切换(图片放自己的路径)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="content-Type" charset="UTF-8">
    <title>Title</title>
<!--    引用vue-->
    <script src="../static/vue.min.js"></script>

</head>
<body>
    <div id="app">
        <img :src="images[currenIndex].imageSrc" alt=""><!--    按索引取图片-->
        <br>
        <button @click="preImage">上一张</button> <!--  绑定点击事件-->
        <button @click="nextImage">下一张</button>
    </div>
    <script>
        new Vue({
            el:"#app",
            data(){
                return{
                    images:[
                        {id:1,imageSrc:"../image/1.jpg"},
                        {id:2,imageSrc:"../image/2.jpg"},
                        {id:3,imageSrc:"../image/3.jpg"},
                    ],
                    currenIndex:0
                }
            },
            methods:{  <!--    点击下一张按钮时调用这个方法-->
                nextImage(){
                    this.currenIndex++;
                    if (this.currenIndex == 3){
                        this.currenIndex=0;
                    }
                },
                preImage(){

                    if (this.currenIndex == 0) {
                        this.currenIndex=3;

                    }
                    this.currenIndex--;
                }
            },
            created(){ //组件,ajax
                setInterval(()=>{
                    this.currenIndex++;
                    if (this.currenIndex == 3){
                        this.currenIndex=0;
                    }
                },2000)
        }
        })
    </script>
</body>
</html>

以上是关于vue--常用指令的主要内容,如果未能解决你的问题,请参考以下文章

vue2.0-常用的几个指令

8个非常实用的Vue自定义指令

8个非常实用的Vue自定义指令

Vue.js——常用的指令

Vue.js常用指令:v-for

Vue的十个常用指令