Vue指令

一.文本操作指令

1.v-text 文本变量

v-text <==> {{}}
<p v-text="msg"></p>

2.v-html 文本变量

<p v-html="msg"></p>
//  msg: '<b>123</b>' => 加粗的123

3.v-once 一次性文本赋值

<p v-once>
    {{msg}}
</p>
// 只能被赋值一次

4.v-model

<input type="text" v-model="val">
// v-model控制的是表单元素的value值

5.v-cloak

  • 解决页面闪烁

    或者导入vue语句放到head中

<style>
    [v-cloak] {
        display: none;
    }
</style>
<div id="app" v-cloak>
    
</div>

二.关键指令

1.v-bind

用法: v-bind:属性名="变量名称"

简写: :属性名="变量名称"

操作的是属性,绑定属性后,属性值可以由变量来控制

操作title

v-bind:title="'my_title'"  => title="my_title"

v-bind:title="title"
data: {
    title: "my_title"
}
=> title="my_title"

操作class


v-bind:class="my_class"
data: {
    my_class: active
}
=> class="active"

v-bind:class="[c1, c2]"
data: {
    c1: C1,
    c2: C2
}
=> class="C1 C2"

v-bind:class="{abc: abc_able}"
data: {
    abc_able: ture
}
=> class="abc"
data: {
    abc_able: false
}
=> class=""

操作style


:style="{width:'200px', height:'200px'}"

:style="my_style"
data: {
    my_style: {
        width: "200px",
        height: "200px"
    }
}

2.v-on指令

1.简写 v-on:click <=> @click
2.默认绑定 @click="fn" => 回调方法可以获取ev
3.带参绑定 @click="fn(10)" => 回调参数只能获取自定义参数10
4.带参绑定 @click="fn(10, $event)" => 回调参数可以获取自定义参数10即事件参数ev
<div id="app">
    <p @click="fn1"></p>
    <p @click="fn2"></p>
    <p @click="fn3(10)"></p>
    <p @click="fn4($event, 10, 20)"></p>
    <p @click="fn5(10, $event, 20)"></p>
</div>
<script type="text/javascript">
    new Vue({
        el: "#app",
        methods: {
            fn1: function () {
                console.log("click event");
            },
            fn2 (ev) {
                console.log(ev);
            },
            fn3 (num) {
                console.log(num);
            },
            fn4 (ev, n1, n2) {
                console.log(ev);
                console.log(n1);
                console.log(n2);
            },
            fn5 (n1, ev, n2) {
                console.log(ev);
            }
        }
    })
</script>

3.v-model指令

  • 操作的是表单元素的value值
双向绑定
<input type="text" v-model="val" name="txt1">
<input type="text" v-model="val" name="txt2">
两个输入框绑定的是同一个val,那么其中一个input的内容改变会直接映射到另一个input上
单个复选框
1. val默认为true(选框选中,提交给后台的为ck=on)
2. val默认为false(选框未选中,不向后台提交该数据)
<input type="checkbox" v-model="val" name="ck">
多个复选框
1. v-model绑定的是同一个变量
2. 该变量的值为数组形式
3. 出现在数组中的value对应的复选框默认为选中状态,eg: val: ['ppqiu', 'zqiu'] => 乒乓球,足球复选框默认选中
4. 提交给后台数据: ck=ppqiu&ck=zqiu
篮球<input type="checkbox" value="lqiu" v-model="val" name="ck">
足球<input type="checkbox" value="zqiu" v-model="val" name="ck">
乒乓球<input type="checkbox" value="ppqiu" v-model="val" name="ck">
多个单选框
1. v-model绑定的是同一个变量
2. 该变量的值为每个单选框的value值,那么该单选框默认选中 eg: val: famale => 女单选框默认选中
3. 提交给后台数据: sex=famale
男:<input type="radio" value="male" v-model="val" name="sex">
女:<input type="radio" value="famale" v-model="val" name="sex">

三.条件渲染指令

  • v-show
<div v-show="isShow"></div>

// 变量isShow值为true(显示,display: block)|false(隐藏,display: none)
  • v-if
<div v-if="isShow"></div>

// 变量isShow值为true(显示,渲染到页面)|false(隐藏,不渲染到页面)
  • v-if v-else-if v-else
<div v-if="tag == 0" key="0"></div>
<div v-else-if="tag == 1" key="1"></div>
<div v-else="tag == 2" key="2"></div> 

// v-else逻辑可言省略
// 变量tag取值在0~2之间,可以决定具体渲染那个div
// 全局属性key是为渲染过的分支建立缓存,加快该分支下一次被渲染的速度,key的值具有唯一性

四.列表渲染指令

  • v-for 遍历数组[]
<ul>
    <li v-for="(n, i) in list" :key="i">value:{{ n }} | index: {{ i }}</li>
</ul>
// list为提供的数组数据
// n为遍历的数组元素值,i为遍历的元素索引
// key是为遍历建立缓存,采用变量赋值,所以通过v-bind:指令操作
<script>
new Vue({
    el: "#app",
    data: {
        list: [1, 2, 3, 4, 5],
    }
})
</script>
  • v-for变量对象{}
<ul>
    <li v-for="(v, k, i) in dic" :key="k">value:{{ v }} | key:{{ k }} | index: {{ i }}</li>
</ul>
// dic为提供的对象(字典)数据
// v为遍历的对象值,k为对象值的键,i为对象值的索引
// key是为遍历建立缓存,采用变量赋值,所以通过v-bind:指令操作
<script>
new Vue({
    el: "#app",
    data: {
        dic: {
            name: '张三',
            age: 18,
            gender: '男'
        }
    }
})
</script>
  • 遍历的嵌套
<div v-for="(person, index) in persons" :key="index" style="height: 21px;">
    <div v-for="(v, k) in person" :key="k" style="float: left;">{{ k }} : {{ v }}&nbsp;&nbsp;&nbsp;</div>
</div>

<script>
new Vue({
    el: "#app",
    data: {
        persons: [
            {name: "zero", age: 8},
            {name: "egon", age: 78},
            {name: "liuXX", age: 77},
            {name: "yXX", age: 38}
        ]
    }
})
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。