Vue学习笔记 - 页面数据渲染的方式

Posted WHOVENLY

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue学习笔记 - 页面数据渲染的方式相关的知识,希望对你有一定的参考价值。

该篇文章主要讲了Vue中渲染数据的第6和第7种方式,即v-model和v-for这两种方式。其余5种方式请点击Vue学习笔记 - 页面数据渲染的方式(一)进行查看

6.v-model

1.定义:唯一的一个可以实现双向数据绑定的指令,单向数据只能:v-m或m-v,而双向绑定v变m就变,m变,v就变

2.作用元素:只有表单类元素能被v-model渲染

3.原理:v-model实际上是一个语法糖,它的本质包含两个操作

1)v-bind:绑定一个value属性,实现m变v变

2)v-on:给当前元素绑定一个input事件,实现v变m变,如下代码用于实现v-on。

<body>
    <div id='app'>
        <!-- 第一种方式 -->
        <input type="text" :value="inputValue" @input="inputValue = $event.target.value">
        <div>{{inputValue}}</div>
        <!-- 第二种方式 -->
        <input type="text" :value="inputValue" @input="changeInput">
        <div>{{inputValue}}</div>
    </div>
</body>
<script src="../lib/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            inputValue: '123'
        },
        methods: {
            getMessge(params) {
                return params
            },
            changeMessage() {
                this.message = this.message + '好帅'
            },
            changeInput(event){
                this.inputValue = event.target.value
            }
        },

    })
</script>

效果展示:
在这里插入图片描述
此时任意在两个输入框中改变value值,页面中展示的这些数据都会进行改变,即实现了双向绑定。
在这里插入图片描述

4.v-model在radio中的使用

<body>   
    <div id='app'>
        <!-- 永远只能选中name值相同的radio中的一个 -->
        <!-- 使用label将其包裹时,并用for将其id绑定后,点击文本时也会选中该项 -->
        <!-- vue中使用v-model配合value设置默认值,并且动态绑定radio的值 -->
        <label for="apple"><input type="radio" name='fruits2' v-model='el' id='apple' value="苹果">苹果</label>
        <label for="orange"><input type="radio" name='fruits2' v-model='el' id='orange' value="橘子">橘子</label>
        <div>你当前选择的是:{{el}}</div>
    </div>
</body>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            el: '橘子'
        },
    )}
</script>                     

5.v-model在checkbox中的的使用

<body>   
    <div id='app'>
        <!-- 当只有一个checkbox时,v-model绑定一个boolean值 -->
        <label for="agree">
            <input type="checkbox" v-model='v' id='agree'>同意协议
        </label>
        <!-- 当有多个checkbox时,v-model绑定一个数组 -->
        <label for="banana">
            <input type='checkbox' v-model='h' id='banana' value="香蕉">🍌
        </label>
        <label for="grape">
            <input type='checkbox' v-model='h' id='grape' value="葡萄">🍇
        </label>
        <div>你当前选择的是:{{h}}</div>
    </div>
</body>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            v:false,
            h:['香蕉']
        },
    )}
</script>  

6.v-model在select中的使用

<body>   
    <div id='app'>
        <!-- 单选时,v-model绑定一个value值 -->
        <select name="" id="" v-model='fruit'>
            <option value="葡萄">葡萄</option>
            <option value="百香果">百香果</option>
            <option value="香蕉">香蕉</option>
            <option value="提子">提子</option>
        </select>
        <div>你选中的是:{{fruit}}</div>
        <!-- 添加multiple属性,使其可以多选,此时v-model需绑定一个数组 -->
        <select name="" id="" v-model='fruits' multiple>
            <option value="葡萄">葡萄</option>
            <option value="香蕉">香蕉</option>
            <option value="百香果">百香果</option>
            <option value="提子">提子</option>
        </select>
        <div>你选中的是:{{fruits}}</div>
    </div>
</body>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            fruits:[],
            fruit:'葡萄'
        },
    )}
</script>  

7.v-model的值绑定

<body>   
    <div id='app'>
        <!-- select -->
       <select name="" id="" v-model='fuu' multiple>
            <option :value="item" v-for='item in list':key='item'>{{item}}</option>
        </select>
        <div>你选中的是:{{fuu}}</div>
        
         <!-- checkbox -->
        <label v-for='item in list' :for='item'>
            <input type="checkbox" :value="item" :id='item' v-model='fu'>{{item}}
        </label>
        <div>你选中的是:{{fu}}</div>
    </div>
</body>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            list:['苹果',"橙子","凤梨","桃子"],
            fu:[],
            fuu:[]
        },
    )}
</script>  

8.v-model的修饰符

1)lazy懒加载修饰符:在默认情况下,v-model默认是一旦数据改变,另一方也会随之改变,而使用lazy修饰符后,可以让数据在失去焦点或者是回车时才进行更新

<input v-model.lazy='date'></input>

2)number修饰符:默认情况下,在输入框中无论输入字符还是数字都会被当成字符串,而使用number修饰符,可以让输入框中只有数字的字符串自动转成数字类型

<input v-model.number='number'></input>

3)trim修饰符:如果输入的内容首尾有很多空格,则可以使用trim过滤内容左右两边的空格

<input v-model.trim='value'></input>

7.v-for

1.定义:一般用于重复的模板,例如tr、li,用于遍历数组或对象

2.例子:

<body>
    <div id='app'>
        <h3>v-for遍历普通对象</h3>
        <div v-for='(item,index) in identity'>{{item}}</div>
        <div v-for='(value,key,index) in identity'>{{key}}:{{value}}</div>

        <h3>v-for遍历数组</h3>
        <div v-for='item in books'>{{item}}</div>
        <div v-for='(item,index) in books'>{{item}}</div>

        <h3>v-for遍历数组对象</h3>
        <div v-for='(item,index) in oArray'>{{index+1}}--{{item.name}}--{{item.age}}   </div>
        <div v-for='(item,index) in objectArray'>
            <div v-for='(value,key,i) in item'>{{key}}:{{value}}</div>
        </div>

        <h3>v-for遍历数字</h3>
        <!-- 从1开始遍历至你写的数值为止 -->
        <div v-for='item in 2'>{{item}}</div>
    </div>
</body>
<script src="../lib/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            books: ['假如给我三天光明', '穷爸爸和富爸爸', '三体'],
            identity: {
                name: "Karry",
                age: 20,
                height: 180,
            },
            oArray: [
                { name: 'hu', age: 12 },
                { name: 'luo', age: 14 },

            ]
        },
    })
</script>

以上是关于Vue学习笔记 - 页面数据渲染的方式的主要内容,如果未能解决你的问题,请参考以下文章

VUE学习笔记:3.vue的插值操作及v-bind绑定属性

Vue2.x基础笔记学习

解决vue2.x中数据渲染以及vuex缓存的问题

Javascript MVC 学习笔记 视图和模板

微信小程序学习笔记-3-问题

vue中axios请求成功了如何把数据渲染到页面上?