Vue常用指令合集

最新推荐文章于 2024-07-09 00:17:48 发布

LuckySoong

最新推荐文章于 2024-07-09 00:17:48 发布

阅读量251

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/Y0admin/article/details/117020542

版权

v-model：双向绑定
{{[name,age]}} {{age > 17 ? '成年' : '未成年'}} * v-model 双向绑定(根据 input 中所输入的 name，age 来影响上述中的 name，和 age 的判断条件) * v-model='name' name 是实例中的变量

let vm = new Vue({ // el:'#app', template:'<h1>hello world {{age}}</h1>',
- 不能使用 body 或者 html 作为渲染的模板(VUE 会发出警告); 有 template 属性; 则会把该属性对应的值作为模板； data:{
  - data 中的属性最终都会挂载到对应的实例上 e:"zhufeng peixun", age: 9, } }).$mount('#app');
mount 和 el 的作用相同 .$mount('#app')此方式只是挂载在实例后面。
v-text：展示其对应的文本
v-once：对应的标签只渲染一次
v-html：把值中的标签渲染出来
{{name}}

hello zhufeng
{{q}};
let vm = new Vue({ el:'#app', data:{ name:'珠峰', q:'<h1>哈哈哈</h1>', } });
v-on：事件绑定
- 事件类型=‘函数’ 或者 @事件类型=‘函数’
- 按钮1 按钮2 按钮3 按钮4
  
  let vm = new Vue({ el:'#app', data:{ name:'zhufeng', }, methods:{ // 函数体的存放位置 // 函数中的 this 统一默认指向实例； fn(val){ console.log(val); // console.log(this===vm); // console.log(this.name); // console.log(arguments); }, fn2(e,n,name){ // 事件的事件对象我们只能通过 $event 传进来； // 传递参数的位置自定义 console.log(e,n,name); }, } })

v-show=‘布尔’：布尔为 true 显示，false 隐藏。

注:v-show 不支持元素，也不支持 v-else

按钮

哈哈哈

<div>
    <div v-for='a in ary'>{{a}}</div>
    <!--1 2 3 4 5 6 7-->
    <h2 v-for='(a,i) in ary'>索引:{{i}};值:{{a}}</h2>
    <!--索引:0;值:1 
        索引:1;值:2 
        索引:2;值:3 
        索引:3;值:4 
        索引:4;值:5 
        索引:5;值:6 
        索引:6;值:7 -->
    <h3 v-for='i in 5'>{{i}}</h3>
    <!--1 2 3 4 5-->
    <h4 v-for='(a,index) in "abcdefg"' :key="a+index">索引:{{index}};{{a}}</h4>
    <!--索引:0;a
        索引:1;b
        索引:2;c
        索引:3;d
        索引:4;e
        索引:5;f
        索引:6;g-->
    <h5 v-for='(q,k,i) in obj'>索引:{{i}};属性名是:{{k}},属性值:{{q}}</h5> 
    <!--索引:0;属性名是:a,属性值:10
        索引:1;属性名是:b,属性值:20
        索引:2;属性名是:c,属性值:30-->
</div>

let vm = new Vue({
    el:'#app',
    data:{
        name:"珠峰",
        // index:10,
        ary:[1,2,3,4,5,6,7],
        obj:{
            a:10,
            b:20,
            c:30,
        },
    },
    methods:{
        fn(n){
            this.index = n;
        }
    }
})

v-if vs v-show (true/false) v-if：判断指令，是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-else-if：顾名思义，充当 v-if 的“else-if 块”，可以连续使用限制：前一兄弟元素必须有 v-if ,后面一兄弟元素必须有 v-else。 v-else：为 v-if 或者 v-else-if 添加“else 块”，限制：前一兄弟元素必须有 v-if 或 v-else-if v-show 另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。 display: none;// 隐藏 display: block;// 存在

v-cloak：防止页面加载时出现 vuejs 的变量名指令，在项目在开发中，经常会遇到当数据加载时vue的一些标签就会闪现，然后等数据加载完后消失，这时候就需要用到 v-cloak 来解决。

v-bind：适用于绑定行内属性

v-bind:value=“item.val”，适用于绑定行内属性简写成 :value=“item.val”

请您选择 {{item.text}}

    <div class="box" @click='fn'>{{selectText}}</div>
    <ul v-show='flag'>
        <li v-for='item in ary' @click='choose(item)'>{{item.text}}</li>
    </ul>
</div>

let vm = new Vue({
    el:'#app',
    data:{
        name:"珠峰",
        select:'',
        ary:[
            {val:0,text:'html'},
            {val:1,text:'css'},
            {val:2,text:'js'},
            {val:3,text:'vue'},
        ],
        flag:false,
        selectText:'',
    },
    methods:{
        fn(){
            this.flag = !this.flag;
        },
        choose(obj){
            this.selectText = obj.text;<!--让 div 里面的文本展示出显示的内容-->
            this.flag = false;<!--让下拉框隐藏-->
        }
    }
})

@keyup.enter：只有按 enter 键才会出发后边的函数
- 按下 enter 键时，获取内容把内容放到数组中；下边的 li 的展示，用v-for循环数组
  
  {{name}}
  - {{item}} 删除{{item}}
  let vm = new Vue({ el:'#app', data:{ name:"珠峰", todo:'', ary:[], }, methods:{ fn(val){ // console.log(val); if(val.keyCode === 13){ // 按下回车键 this.ary.push(this.todo); this.todo = ''; } }, fn2(){ this.ary.push(this.todo); this.todo = ''; }, del(item,index){ // 删除的操作 // this.ary.splice(index,1); this.ary = this.ary.filter((val)=>{ // val 1 2 3 4 5 6 // item 1 (1 2 3 4 5 6) return item != val }) } } })