vue（2）

computed计算属性

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
    <p>{{reverseStr}}</p>
    <ul>
        <li>{{text.split('').reverse().join('')}}</li>
        <li>{{text.split('').reverse().join('')}}</li>
        <!--上面两行，同样的功能要计算两次，消耗性能，并且导致HTML代码臃肿，下面用计算属性更优-->
        <li>{{reverseStr}}</li>
        <li>{{reverseStr}}</li>
        <li>{{reverseStr}}</li>
        <li>{{reverseStr}}</li>
    </ul>
</div>
    <script>
        const {createApp}=Vue
        createApp({
            data(){
                return{
                    text:'Hello,world!'
                }
            },
            computed:{
                reverseStr(){//这里一定要指定this.text,this指的是当前实例，可以理解为data里的数据
                    return this.text.split('').reverse().join('')
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

事件处理

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
    <p>{{count}}</p>
    <button v-on:click="increment()">+</button>
    <button @click="increment()">+</button>
    <button v-on:click="decrement()">-</button>
    <button @click="decrement()">-</button>
 
    <button v-on:click="increment(5)">+5</button>
    <button v-on:click="increment(6)">+6</button>
    <button v-on:click="decrement(5)">-5</button>
    <button v-on:click="decrement(6)">-6</button>
</div>
    <script>
        const {createApp}=Vue
        createApp({
            data(){
                return{
                    count:0
                }
            },
            computed:{//计算属性
 
            },
            methods:{//方法
                increment (a=1) {
                    // this.count=this.count+a
                    this.count+=a
                },
                decrement (a=1) {
                    this.count-=a
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

计算属性VS方法

注意：计算属性和方法，在确定上确实是相同的，然而不同之处在于计算属性会基于其响应式依赖的缓存。一个计算属性仅会在其响应式依赖更新时才会被重新计算。

条件渲染

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-if="type==='A'">AAAA</li>
        <li v-else-if="type==='B'">BBBB</li>
        <li v-else>CCCC</li>
    </ul>
    <p v-show="seen">现在你看的到我</p>
</div>
    <script>
        const {createApp}=Vue
        createApp({
            data(){
                return{
                    type:'B',
                    seen:false
                }
            }
        }).mount('#app')
    </script>
</body>
</html>

列表渲染

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
    <table>
        <thead>
        <tr>
            <td>id</td>
            <td>书名</td>
            <td>价格</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(book,index) of books":key="index">
<!--            key一般是数据库里的数据上的唯一且不重复的主键——即id-->
            <td>{{book.id}}</td>
            <td>{{book.name}}</td>
            <td>{{book.price}}</td>
        </tr>
        </tbody>
    </table>
</div>
    <script>
        const {createApp}=Vue
        createApp({
            data(){
                return{
                    books:[
                        {id:0,name:'三体',price:68},
                        {id:1,name:'平凡的世界',price:128},
                        {id:1,name:'围城',price:48}
                    ]
                }
            }
        }).mount('#app')
    </script>
</body>
</html>　　

表单输入绑定

（1）单行文本

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
<!--    <input type="text" :value="text" @inout="ipt($event)">-->
    <input type="text" v-model="text">
    <p>{{text}}</p>
</div>
    <script>
        const {createApp}=Vue
        createApp({
            data(){
                return{
                   text:'Hello,world!'
                }
            },
 /*           methods:{
                ipt(event){
                    this.text=event.target.value
                }
            }*/
        }).mount('#app')
    </script>
</body>
</html>

（2）多行文本

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../vue-shopping-cart/node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <textarea name="" id="" v-model="message"></textarea>
<!--    多行文本，及换行符，可以被v-model实时修改数据-->
    <span>Musnfjbj</span>
<!--    此css属性可以展示字符串中的换行符-->
    <p style="white-space: pre-line;">{{message}}</p>
</div>
 
 
</body>
</html>
<script>
   const {createApp}=Vue
    createApp({
        data(){
            return{
                message:''
            }
        }
    }).mount('#app')
</script>

（3）复选框

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../vue-shopping-cart/node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <label for="ipt"></label>
    <input type="checkbox" id="ipt" :checked="checked">数据单向绑定，data驱动UI，UI不可以修改data
    <p>{{checked}}</p>
</div>
 
 
</body>
</html>
<script>
  const {createApp}=Vue
  createApp({
        data(){
            return{
                checked:false
            }
        }
    }).mount('#app')
</script>

（4）数据双向绑定

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../vue-shopping-cart/node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <label for="ipt"></label>
    <input type="checkbox" id="ipt" v-model="checked">
    <p>{{checked}}</p>
</div>
 
 
</body>
</html>
<script>
    const {createApp}=Vue
    createApp({
        data(){
            return{
                checked:true
            }
        }
    }).mount('#app')
</script>

（5）将多个复选框绑定到同一个数组或集合

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../vue-shopping-cart/node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <h2>选中的人是：{{checkedNames}}</h2>
    <input type="checkbox" v-model="checkedNames" value="Jack">Jack
    <input type="checkbox" v-model="checkedNames" value="John">John
    <input type="checkbox" v-model="checkedNames" value="Mike">Mike
 
</div>
</body>
</html>
<script>
    const {createApp}=Vue
    createApp({
        data(){
            return{
                checkedNames:[]
            }
        }
    }).mount('#app')
</script>

（6）单选框

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../vue-shopping-cart/node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <h2>选中的人是：{{picked}}</h2>
    <input type="radio" v-model="picked" value="1">男
    <input type="radio" v-model="picked" value="2">女
</div>
</body>
</html>
<script>
    const {createApp}=Vue
    createApp({
        data(){
            return{
                picked:1
            }
        }
    }).mount('#app')
</script>

（7）选择器

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../vue-shopping-cart/node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <div>Selected: {{ selected }}</div>
 
    <select v-model="selected">
        <option disabled value="">Please select one</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
</div>
</body>
</html>
<script>
    const {createApp}=Vue
    createApp({
        data(){
            return{
               selected:''
            }
        }
    }).mount('#app')
</script>

　　注意：如果 v-model 表达式的初始值不匹配任何一个选择项，<select> 元素会渲染成一个“未选择”的状态。在 iOS 上，这将导致用户无法选择第一项，因为 iOS 在这种情况下不会触发一个 change 事件。因此，我们建议提供一个空值的禁用选项，如上面的例子所示。

（8）多选 (值绑定到一个数组)

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../vue-shopping-cart/node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <div>Selected: {{ selected }}</div>
 
    <select v-model="selected" multiple>
        <option>Aaaaaaaa</option>
        <option>Bbbbbbbb</option>
        <option>Cccccccc</option>
    </select>
</div>
</body>
</html>
<script>
    const {createApp}=Vue
    createApp({
        data(){
            return{
               selected:[]
            }
        }
    }).mount('#app')
</script>

（9）修饰符

.lazy

默认情况下，v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../vue-shopping-cart/node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="message">
    <input type="text" v-model.lazy="message">
</div>
</body>
</html>
<script>
    const {createApp}=Vue
    createApp({
        data(){
            return{
              message:''
            }
        }
    }).mount('#app')
</script>

.number

如果你想让用户输入自动转换为数字，你可以在 v-model 后添加 .number 修饰符来管理输入：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../vue-shopping-cart/node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="message">
    <input type="text" v-model.number="message">
</div>
</body>
</html>
<script>
    const {createApp}=Vue
    createApp({
        data(){
            return{
              message:''
            }
        }
    }).mount('#app')
</script>

　　如果该值无法被 parseFloat() 处理，那么将返回原始值。

　　number 修饰符会在输入框有 type="number" 时自动启用。

.trim

如果你想要默认自动去除用户输入内容中两端的空格，你可以在 v-model 后添加 .trim 修饰符：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../vue-shopping-cart/node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="message">
    <input type="text" v-model.trim="message">
    <p>{{message}}</p>
</div>
</body>
</html>
<script>
    const {createApp}=Vue
    createApp({
        data(){
            return{
              message:''
            }
        }
    }).mount('#app')
</script>

　　

posted @   代码小昕  阅读(16)  评论(0)  编辑  收藏  举报
相关博文：
·  vue（1）
·  ES6新特性
·  16 vue之计算属性
·  vue进阶
·  6. 计算属性
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 零经验选手，Compose 一天开发一款小游戏！
· 因为Apifox不支持离线，我果断选择了Apipost！
· 通过 API 将Deepseek响应流式内容输出到前端
点击右上角即可分享
微信分享提示
AI IDE Trae