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

Posted 2021-06-17 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请求成功了如何把数据渲染到页面上？

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

目录

6.v-model

7.v-for