vue 指令（二）-CFANZ编程社区

计算属性（computed）

1 简单操作
我们需要做一些计算操作，比如外国人名的拼接（乔治·二蛋）等

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app" >
   <p> 乔治·二蛋</p>
    <p> 1 常规拼接</p>
    <p> {{ firstName + '·' + lastName }}</p>
    <p> 2 使用函数</p>
    <p> {{ getName() }}</p>
    <p> 3 使用计算属性</p>
    <p> {{ name }}</p>
</div>

<script>
    const app = {
        data() {
            return {
                firstName:'乔治',
                lastName: '二蛋'
            }
        },computed:{
            // 细节：本质上还是属性，写法如函数，命名为属性
            name(){
                return this.firstName + '·' + this.lastName;
            }
        },methods:{
            getName(){
                return this.firstName + '·' + this.lastName;
            }
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

在这里插入图片描述
2 深入操作（复杂计算）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app" >
   <p > 会员总积分： {{ totalScore }}</p>
</div>

<script>
    const app = {
        data() {
            return {
                members:[
 					{id:'001',name:'1',score:1},
                    {id:'002',name:'2',score:2},
                    {id:'003',name:'3',score:3},
                    {id:'004',name:'4',score:4}
                ]
            }
        },computed:{
            totalScore(){
                let total= 0;
                for(let member of this.members){
                    total+=member.score;
                }
                return total;
            }
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

在这里插入图片描述
3 普通方法和computed区别

在这里插入图片描述

在这里插入代码片`<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app" >
    
    <p> 2 使用函数</p>
    <p> {{ getName() }}</p>
	 <p> {{ getName() }}</p>
	 <p> {{ getName() }}</p>
    <p> 3 使用计算属性</p>
    <p> {{ name }}</p>
	 <p> {{ name }}</p>
	 <p> {{ name }}</p>
</div>

<script>
    const app = {
        data() {
            return {
                firstName:'乔治',
                lastName: '二蛋'
            }
        },computed:{
            // 细节：本质上还是属性，写法如函数，命名为属性
            name(){
				console.log(11);
                return this.firstName + '·' + this.lastName;
            }
        },methods:{
            getName(){
				console.log(22);
                return this.firstName + '·' + this.lastName;
            }
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>`

在这里插入图片描述

v-show和v-if

区别1
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app" >
    <div v-if="flag">
        下雨
    </div>
    <div v-else>
        不下雨
    </div>
    ---------------------------
    <div v-show="flag">
        下雨
    </div>
    <div v-show="!flag">
        不下雨
    </div>

    <button @click="flag=!flag">切换</button>
</div>

<script>
    const app = {
        data() {
            return {
                flag : true
            }
        },computed:{
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

在这里插入图片描述
区别2
v-if
不会保存原来的值，会重新输入。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app" >
    // 假设登录接口  v-if else
    <div v-if="loginType==='phone'">
        <label>手机</label>
        <input type="text"> <br>
        <label>密码</label>
        <input type="text">
    </div>
    <div v-else>
        <label>email</label>
        <input type="text"><br>
        <label>密码</label>
        <input type="text">
    </div>
    <button @click="change">切换</button>
</div>

<script>
    const app = {
        data() {
            return {
                loginType : 'phone'
            }
        },
        methods:{
            change(){
                this.loginType === 'phone' ? this.loginType = 'email' : this.loginType = 'phone';
            }
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

v-show 会保存原来的值
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app" >
    // 假设登录接口  v-show
    <div  v-show="loginType==='phone'">
        <label>手机</label>
        <input type="text"><br>
        <label>密码</label>
        <input type="text">
    </div>
    <div v-show="loginType==='email'">
        <label>email</label>
        <input type="text"><br>
        <label>密码</label>
        <input type="text">
    </div>
    <button @click="change">切换</button>
</div>

<script>
    const app = {
        data() {
            return {
                loginType : 'phone'
            }
        },
        methods:{
            change(){
                this.loginType === 'phone' ? this.loginType = 'email' : this.loginType = 'phone';
            }
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

v-for 遍历

1 简单数组

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app" >

    <ul>
        <li v-for="p in personArr">{{p}}</li>
    </ul>
</div>


<script>
    const app = {
        data() {
            return {
                personArr : ['1','2']
            }
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

在这里插入图片描述
2 复杂遍历数组

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app" >
    <ul>
        <li v-for="p in personArr">{{p}}</li>
    </ul>
    -------------------------------------------
    <ul>
        <li v-for="p in persons">{{p.name}}--------{{p.age}}</li>
    </ul>
</div>


<script>
    const app = {
        data() {
            return {
                personArr : ['1','2'],
                persons:[
                    {name:'大王',age:18},
                    {name:'小王',age:12}
                ]
            }
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

在这里插入图片描述
3 遍历对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app" >
    <ul>
        <li v-for="(p,key,index) in persons">{{index}}-------{{key}}--------{{p}}</li>
    </ul>
</div>


<script>
    const app = {
        data() {
            return {
                persons:
                    {name:'大王',age:18,girls:['小蓝','小红']},
            }
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

在这里插入图片描述

v-model

表单绑定：实现表单元素和数据的双向绑定

最初输入框是 1

在这里插入图片描述
输入框多输入 2

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app" >
  <input type="text" v-model="msg">
    <h1>{{msg}}</h1>
</div>


<script>
    const app = {
        data() {
            return {
                msg: 1
            }
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

v-model 和单选复选等配合

1 单选：
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app" >
 <label ><input type="radio"  name="sex" value="男" v-model="sex">男</label>
 <label ><input type="radio"  name="sex" value="女" v-model="sex">女</label>


    <h2> 选中的为： {{sex}}</h2>
</div>


<script>
    const app = {
        data() {
            return {
                sex: '男'
            }
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

2 复选：
勾选一个：例如勾选同意协议或者不同意下一步按钮显示和不显示

不同意：
在这里插入图片描述
同意：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app" >
 <label ><input type="checkbox"  v-model="isAgree">是否同意</label>
    <h2> 是否同意： {{isAgree? '同意' : '不同意'}}</h2>
    <button :disabled="!isAgree"> 下一步</button>
</div>


<script>
    const app = {
        data() {
            return {
                isAgree: false
            }
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

3 多个选择:固定值绑定

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app" >
 <label ><input type="checkbox"  v-model="isAgree">是否同意</label>
    <h2> 是否同意： {{isAgree? '同意' : '不同意'}}</h2>
    <button :disabled="!isAgree"> 下一步</button>

    <br>
    <br>
    <label >兴趣爱好
    <input type="checkbox" value="篮球" v-model="rabbits">篮球
    <input type="checkbox" value="足球" v-model="rabbits">足球
    </label>
     用户爱好：{{rabbits}}
</div>


<script>
    const app = {
        data() {
            return {
                isAgree: false,
                rabbits:[]
            }
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

多个选择: 传值绑定
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app" >
    <label v-for="star in stars" :for="star">
    <input type="checkbox" :value="star" :id="star" v-model="likes">{{star}}
    </label>
     喜欢的数字：{{likes}}
</div>


<script>
    const app = {
        data() {
            return {
                stars:['1','2'],
                likes:[]
            }
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

4 下拉框
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app" >
    <p>
        你所在的城市是：
    </p>
    <select  name="city" v-model="citys">
        <option value="北京">
            北京
        </option>
        <option value="上海">
            上海
        </option>
    </select>
    <p>
        选择的城市是：{{citys}}
    </p>
</div>


<script>
    const app = {
        data() {
            return {
                citys:'北京'
            }
        }
    }

    Vue.createApp(app).mount('#app')
</script>
</body>
</html>

v-model 修饰符

1 懒加载（失去焦点或者回车进行用户输入显示）
因为v-model是双向绑定，假设input框，用户输入1，v-model会立即显示1，而我们不想这么做，想要用户输入完在显示，那就用到了v-model.lazy.

<input type="text" v-model.lazy="msg">...

2 v-model number

由于type=“number” 里输入的数字是String类型，想要固定为number类型，就要用到v-model.number,它使得这个type=“number”输入的类型就固定位number类型。

注：显示类型使用的是 {{typeof xxx}}
使用type=“number”
在这里插入图片描述
使用 v-model.number

3 v-model trim

去掉首尾空格

<input type="text" v-model.trim=""msg>...