vue中常见的v指令

最新推荐文章于 2022-11-24 16:37:18 发布

kjl-37

最新推荐文章于 2022-11-24 16:37:18 发布

阅读量438

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

原文链接：https://blog.youkuaiyun.com/weixin_42595284/article/details/82972237?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163645844116780357285107%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=163645844116780357285107&biz_id=0&utm

常用指令

v-text 设置双标签元素的innerText
v-html 设置双标签元素的innerHTML
v-if 插入或者移除元素(true,插入,false移除)
v-else 保证上方兄弟节点存在v-if || v-else-if
v-if v-else 只会有其一存在
v-show 隐藏或者显示元素
v-model 双向数据绑定（元素必须有value, DOM元素的value与js内存变量的属性绑定）

class结合v-bind使用

变化的属性可以以v-bind的赋变化的值
v-bind:属性名=“表达式||对象”
简写方式 :属性名=“表达式||对象”
设置一个样式三元表达式
设置多个样式对象的形式
对象 {样式名:是否使用bool,样式名:是否使用}

methods和v-on的使

options:

methods 是一个对象,key是函数名，value是函数体

v-on:DOM原生事件=“表达式||函数”

如果调用函数没有参数，()可以省略

简写方式: @事件名=“表达式||函数”

v-for的使用

v-for=“xxxx in items” :key=“index”

总结

数组v-for="(ele,index) in dataArr " :key=“index”
对象v-for="(value,key,index) in dataObj" :key=“index”

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
       .app{
           width: 500px;
           margin: 50px auto;
           background: #ccc;
           text-align: center;
       }
       .red{
           color: red;
       }
       .border{
           border: 1px solid blue;
       }
       input{
           text-align: center;
       }
       ul{
           padding: 0;
       }
       li{
           list-style: none;
           border: 1px solid blue;
       }
   </style>
</head>
<body>
   <div class="app">
       <h5> {{msg}} </h5>
       <input type="text" v-model='msg'>
       <h5 :class='{red:isTrue}'> {{msg}} </h5>
       <button @click='change'>点击改变</button>
       <h5 v-if = 'isTrue' v-text = 'msg'></h5>
       <h5 v-show = 'isTrue' v-html = 'msg'></h5>
       <ul v-show = '!isTrue'>
           <li v-for='(item,index) in arr' v-text = 'item'></li>
       </ul>
   </div>
   <script type="text/javascript" src="lib/vue-2.4.0.js"></script>
   <script type="text/javascript">
       let vm = new Vue({
           el:'.app',
           data:{
               msg:'<h1>hello world</h1>',
               isTrue:false,
               arr:['a','b','c','d']
           },
           methods:{
               change(){
                   this.isTrue = !this.isTrue;
               }
           }
       })
   </script>
</body>
</html>