Vue ---- 表单指令 条件指令 循环指令 分隔符 过滤器 计算属性 监听属性

目录

• 案例讲解：
• 一. 表单指令
  • 1.重点:
    • 补充
  • 2.单选框
  • 3.单一复选框
  • 4.多复选框
• 二 . 条件指令
  • v-if/v-show ...
  • v-clock
• 三 . 循环指令
  • string
  • arrag
  • obj
  • 循环指令案例(splice):
• 四 . localstorage and sessionstorage
• 五.分隔符(了解)
• 六.过滤器
  • 1.在filters成员中定义过滤器方法
  • 2.可以对多个值进行过滤，过滤时还可以额外传入辅助参数
  • 3.过滤的结果可以进行下一次过滤(过滤的串联)
• 7.计算属性
• 8.监听属性

案例讲解：

# 有一个200x200矩形框wrap，点击wrap本身，记录点击次数，如果是1次wrap为pink色，2次wrap为green色，3次wrap为cyan色，4次重新回到pink色，依次类推

<div class="wrap" @click="actionFn" :style="{backgroundColor: bgColor}">{{ count }}</div>

 methods: {
            actionFn() {
                this.count ++;
                this.bgColor = this.colorArr[this.count % 3]
                // 0 % 3 余 0
                // 1 % 3 余 1 ....
            }
        }

一. 表单指令

1.重点:

<!--v-model='变量' 可以完成双向绑定-->
<!--变量值与表单标签的value相关-->
<input type="text" name="user" placeholder="输入账号" v-model="v1">
<input type="text" name="password" placeholder="输入密码" v-model="v1">
<!--v-model绑定的变量值可以影响到表单标签的值 反过来表单标签的值也可以影响变量的值-->

补充

<!--数字之间的加减 例如字符串和num 可以在字符串前加上+即可转换成num-->

2.单选框

男：<input type="radio" name="sex" value="male" v-model="v2">
女：<input type="radio" name="sex" value="female" v-model="v2">
{{ v2 }} <!--v2的值是单选框的value-->

3.单一复选框

是否同意：同意 <input type="checkbox" name="agree" v-model="v3">
{{ v3 }}  <!--v3拿到的是布尔值 -->

4.多复选框

爱好：<br>
男：<input type="checkbox" name="hobbies" value="male" v-model="v4">
女：<input type="checkbox" name="hobbies" value="female" v-model="v4">
哇塞：<input type="checkbox" name="hobbies" value="other" v-model="v4">
{{ v4 }} <!--拿到的是一个数组 [ "male", "female" ] -->
<!--但是你必须给个数组-->

        data: {
            v1: '123', // v-model
            v2: 'male', // 单选框
            v3: false, // 单一复选框
            v4: ['male', 'female'] // 复选框
        }

二 . 条件指令

v-if/v-show ...

v-show='布尔值' v-if='布尔值'

v-if | v-else-if | v-else

v-show 和 v-if之间的区别:

// v-show='布尔值'  隐藏时:采用display:none进行渲染
// v-if='布尔值'    隐藏时:不在页面中渲染(保证不渲染的数据泄露)

<div class="box r" v-if="page === 'r_page'"></div>
<div class="box b" v-else-if="page === 'b_page'"></div>
<div class="box g" v-else></div>
<!--不成立就不会渲染!!-->

v-clock

# 当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。

js不变，在 div中加入 v-cloak 指令

<div id="app" v-cloak>
    {{context}}
</div>

[v-cloak]{
    display: none;
}

三 . 循环指令

<!--循环指令：v-for="ele in string|array|obj"  -->

string

<i v-for="c in string">{{ c }} </i>    <!--string 现在为字符串 我们可以直接拿到 {{ c }}-->

<i v-for="(c, i) in string">{{i}}:{{c}</i> <!--c 为值 i 为索引-->

arrag

<div v-for="e in arrag">{{ e }}</div> 

<div v-for="(e, i) in arrag">{{ i }}:{{ e }}</div> <!--e 为值 i 为索引-->

obj

<div v-for="v in obj">{{ v }}</div>  <!--v 为值-->

<div v-for="(v, k, i) in people">{{ i }} - {{ k }}:{{ v }}</div>
 <!--v 为值-->   <!--k 为键-->   <!--i 为索引-->

<!--v-for中需要给循环的组件或者标签中建立 :key= 完成缓存的建立-->

循环指令案例(splice):

<input type="text" v-model="comment">
<button type="button" @click="send_msg">留言</button>
<ul>
    <li v-for="(msg, i) in msgs" @click="delete_msg(i)">{{ msg }}</li>
</ul>

data: {
    comment: '',
    msgs: localStorage.msgs ? JSON.parse(localStorage.msgs) : [],
},
methods: {
    send_msg() {
        // 将comment添加到msgs数组中：unshift push 首尾增 | shift pop 首尾删
        // this.msgs.push(this.comment);
        // 数组操作最全方法：splice(begin_index, count, ...args)
        // 从第0位开始 操作2位 操作内容为 args
        // this.msgs.splice(0, 2);
        if (!this.comment) {
            alert('请输入内容');
            return false;
        }
        this.msgs.push(this.comment);
        this.comment = '';
        localStorage.msgs = JSON.stringify(this.msgs);
    },
    delete_msg(index) {
        this.msgs.splice(index, 1);
        localStorage.msgs = JSON.stringify(this.msgs);
    }
}

四 . localstorage and sessionstorage

    // 前台数据库
    // localStorage: 永久存储
    // sessionStorage：临时存储(所属页面标签被关闭后，清空)
    // 存
    // localStorage.n1 = 10;
    // sessionStorage.n2 = 20;
    // 取
    // localStorage.n1
    // sessionStorage.n2
    // 数组等类型需要先序列化成JSON
    // localStorage.arr = JSON.stringify([1, 2, 3]);
    // JSON.parse(localStorage.arr)
    // 清空数据库
    // localStorage.clear();

五.分隔符(了解)

delimiters: ['[{', '}]'],  // 修改插值表达式符号

    <div id="app">
        {{ msg }}
        [{ msg }]  <!--修改过后的-->
    </div>

六.过滤器

1.在filters成员中定义过滤器方法

<p>{{ num | f1 }}</p>

filters:{
    // 传入所有要过滤的条件，返回值就是过滤的结果
    f1 (num) {
        return num * 10;
    },
}

2.可以对多个值进行过滤，过滤时还可以额外传入辅助参数

<p>{{num , num2 | f2 }}</p>

filters:{
    // 传入所有要过滤的条件，返回值就是过滤的结果
    f2(num, num2){ // 接受两个参数
        return num * num2
    },
}

3.过滤的结果可以进行下一次过滤(过滤的串联)

<p>{{ num , num2 | f2 | f3 }}</p>

filters:{
    f3(num){
        return num * 3
    },
}

7.计算属性

 1、computed计算属性可以声明 方法属性（方法属性一定不能在data中重复声明）

 2、方法属性 必须在页面中渲染，才会启用绑定的方法，方法属性的值就是绑定方法的返回值

 3、绑定的方法中出现的所有变量都会被监听，任何一个变化发生值更新都会重新出发绑定方法，从而更新方法属性的值

案例:

<input type="text" value="" v-model="v1">
<input type="text" value="" v-model="v2">
<p>{{ result }}</p>

computed:{
    result(){
        this.v1;
        this.v2;
        return +this.v1 + +this.v2;
    }
}

一般用来解决的问题：一个变量值依赖于多个变量

8.监听属性

1、监听的属性需要在data中声明，监听方法不需要返回值

2、监听的方法名就是监听的属性名，该属性值发生更新时就会回调监听方法

3、监听方法有两个回调参数：当前值，上一次值

案例:

<p>姓名：<input type="text" v-model="full_name"></p>
<p>姓：{{ first_name }}</p>
<p>名：{{ last_name }}</p>

data:{s
    full_name:'',
    first_name:'',
    last_name:''
},
watch:{
    full_name(n,i){
        console.log(n, i);
        name_arr = n.split('');
        this.first_name = name_arr[0];
        this.last_name = name_arr[1];
    }
}

解决的问题：多个变量值依赖于一个变量值