Vue学习(6)：v-show/for/model总结

狄鸠
99 阅读4分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情

v-show 的使用

v-show

是否显示元素，就是给元素添加 display:none 这个行内样式

使用

<h2 v-show="isShow">我是v-show</h2>
<h2 v-if="isShow">我是v-if</h2>

两者区别：

  1. 都会隐藏元素，v-if 是直接删除了DOM元素，v-show 是给元素添加 display:none 这个属性

建议：

  1. 当需要频繁的切换一个元素的显示和隐藏，使用 v-show
  2. 只有一次切换的时候，使用 v-if

v-for 循环遍历

v-for

对数组或者是对象进行遍历

使用

  • 遍历数组

    1. 遍历中没有下标（index）值

      <li v-for="item in movies">{{item}}</li>

movies: ['《星际穿越》', '《弱点》', '《一条狗的使命》', '《夏洛特烦恼》']

    2. 遍历过程中有下标（index）值

      <li v-for="(item, index) in movies">{{index}}.{{item}}</li>

movies: ['《星际穿越》', '《弱点》', '《一条狗的使命》', '《夏洛特烦恼》']

  • 遍历对象

    1. 遍历值（value）

      <li v-for="item in movies">{{item}}</li>

movies: {
	name: 'xyb',
	age: 20,
	sex: 'M'
}

    2. 遍历键/值（key/value）

      <li v-for="(value, key) in movies">{{key}}-{{value}}</li>

movies: {
	name: 'xyb',
	age: 20,
	sex: 'M'
}

    3. 遍历键/值/下标（key/value/index）

      <li v-for="(value, key, index) in movies">{{index}}-{{key}}-{{value}}</li>

movies: {
	name: 'xyb',
	age: 20,
	sex: 'M'
}

组件的key属性

在使用 v-for 的时候，给对应的元素或者组件添加上一个 :key: :key​ 属性

  • 为什么要条件key属性？

    1. 这个和 Vue 的虚拟DOM的Diff算法有关

    2. 在很多列表节点中插入相同节点的时候，他内部的执行效率起始是很低的

      在这里插入图片描述

    3. 使用 key 属性之后，各自相对的元素还是会相对，关注的点只在F上面

    在这里插入图片描述

  • 使用key是为了能够高效的更新虚拟DOM

  • 使用

    <li v-for="item in movies" :key="item">{{item}}</li>

movies: ['《星际穿越》', '《弱点》', '《一条狗的使命》', '《夏洛特烦恼》']

表单绑定 v-model

概述

  • 使用 v-model 指令在 ， 以及 元素上面创建数据的双向绑定 什么是双向绑定？就是我们从DOM元素界面修改值也能影响到 Vue 实例里面的数据，类似这样

    在这里插入图片描述

  1. 以前我们只能修改 Vue 实例里面的数据来让DOM进行响应式，不能通过改变DOM的数据让Vue的数据改变

    在这里插入图片描述

  2. 这样写也是不能发生双向绑定

    <div id="app">
    <input type="text" :value="message">
    <h3>{{message}}</h3>
</div>

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})
下面，通过双向绑定，使我们在input表单上直接修改值能影响到 Vue 实例里的数据，从而发生响应式

双向绑定的原理（宏观层面）

  1. 给一个input表单进行 input 事件监听

  2. 表单的 vales 值发生变化时，触发事件，改变Vue实例里的数据，发生响应式

    v-model的本质，本质就是下面这坨代码实现双向绑定的语法糖

    <!-- 1. 普通写法 -->
<div id="app">
    <input type="text" :value="message" @input="changeValue">
    <h3>{{message}}</h3>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        },
        methods: {
            changeValue(e) { // 当输入值发生变化，触发事件
                this.message = e.target.value
            }
        }
    })
</script>

<!-- 2. 语法糖写法 -->
<input type="text" :value="message" @input="message = $event.target.value">
<!-- 上面这段代码的本质就是 -->
<input type="text" v-model="message">

核心

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

  • text 和 textarea 元素使用 value 属性和 input 事件；
  • checkbox 和 radio 使用 checked 属性和 change 事件；
  • select 字段将 value 作为 prop 并将 change 作为事件

使用

  1. radio
    <!-- 最普通写法 -->
<label for="male">
    <input type="radio" name="sex" value='男' id="male" v-model="sex">男
</label>
<label for="female">
    <input type="radio" name="sex" value='女' id="female" v-model="sex">女
</label>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            sex: '',
        }
    })
</script>

<!-- v-model 可以让我们单选框的name值发生互斥，所以不用写name值 -->
<div id="app">
    <label for="male">
        <input type="radio" value='男' id="male" v-model="sex">男
    </label>
    <label for="female">
        <input type="radio" value='女' id="female" v-model="sex">女
    </label>
    <h2>sex的值：{{sex}}</h2>
</div>
<script src="VueJs/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            sex: '男',		// 这里默认写 男，会相应到DOM里面，value为男的会默认选中
        }
    })
</script>

    在这里插入图片描述

  2. checkbox

    单选框的时候

    <div id="app">
    <input type="checkbox" id="agree" v-model="isAgree">
    <label for="agree">同意</label>
    <h3>当前选择的是：{{isAgree}}</h3>
    <button :disabled="!isAgree">下一步</button>
</div>
<script src="VueJs/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
            isAgree: false
        }
    })
</script>

    在这里插入图片描述

    多选框的时候

    <div id="app">
    <input type="checkbox" value="看书" v-model="hobbies">看书
    <input type="checkbox" value="游泳" v-model="hobbies">游泳
    <input type="checkbox" value="跑步" v-model="hobbies">跑步
    <input type="checkbox" value="打游戏" v-model="hobbies">打游戏
    <h3>选择的爱好有：{{hobbies}}</h3>
</div>
<script src="VueJs/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            hobbies: []
        }
    })
</script>

    在这里插入图片描述

  3. select

    选择一个

    <div id="app">
    <select name="fruit" id="" v-model="fruit">
        <option value="杭州">杭州</option>
        <option value="金华">金华</option>
        <option value="萧山">萧山</option>
        <option value="苏州">苏州</option>
        <option value="上海">上海</option>
    </select>
    <h3>您当前选择的是:{{fruit}}</h3>
</div>
<script src="VueJs/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            fruit: '杭州'
        }
    })
</script>

    在这里插入图片描述

    选择多个

    <div id="app">
    <!-- 选择一个 -->
    <select name="fruit" v-model="fruit" multiple>
        <option value="杭州">杭州</option>
        <option value="金华">金华</option>
        <option value="萧山">萧山</option>
        <option value="苏州">苏州</option>
        <option value="上海">上海</option>
    </select>
    <h3>您当前选择的是:{{fruit}}</h3>
</div>
<script src="VueJs/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            fruit: []
        }
    })
</script>

    在这里插入图片描述

    使用v-for 来动态渲染

    <div id="app">
    <select v-model='finallyData'>
        <option v-for="item in originalOpt" >{{item}}</option>
    </select>
    <h3>最终的数据是: {{finallyData}}</h3>
</div>
<script src="VueJs/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            originalOpt: ['杭州', '上海', '北京', '金华'],
            finallyData: '杭州',
        }
    })

    在这里插入图片描述

值绑定

对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是被我们写死的，我们可以把值绑定到Vue实例的一个动态属性上

选项里面的数据不能写死，服务器会给我们可选的数据，我们需要动态渲染数据，就是v-bind:value

动态渲染数据

<div id="app">
    <label v-for="item in originOpt">
        <input type="checkbox" name="bool" :value="item" v-model="picked">{{item}}
    </label>
    <h3>{{picked}}</h3>
</div>
<script src="VueJs/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            picked: [],
            originOpt: ['篮球', '足球', '乒乓球', '羽毛球']
        }
    })
</script>

在这里插入图片描述

修饰符

.lazy

以前把 input 输入框进行双向绑定的时候，只要是输入框发生了 input 事件， Vue 实例里面的 message 就会实时发生变化并进行数据的响应，我们可以添加 .lazy 修饰符来改变表单的监听事件，当我们失去焦点或者回车时候，才会发生双向绑定

如果不想实时发生双向绑定，可以给 v-model 添加 lazy 修饰符：

<div id="app">
    <input type="text" v-model.lazy="message">
    <h3>{{message}}</h3>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
        }
    })
</script>

在这里插入图片描述

.number

我们用 input:number 这个表单时，用户虽然输入的数字，但是传到后台其实是 string字符换

在这里插入图片描述

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<div id="app">
    <input type="number" v-model.number="message">	
    <h3>类型：{{ typeof message}} 值：{{message}}</h3>
</div>
<script src="VueJs/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 1,
            iptValue: null,
        }
    })

在这里插入图片描述

.trim

用户输入的如果是带空格的字符串。我们可以添加该修饰符来去除

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<div id="app">
    <p>去空格</p>
    <input type="text" v-model.trim="message">
    <h3>值："{{message}}"</h3>
</div>
<script src="VueJs/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: '',
        }
    })

​ 在这里插入图片描述

avatar
文章
阅读
粉丝