Vue.js的使用

最新推荐文章于 2022-06-29 10:34:19 发布

即将入土的羸弱老年人

最新推荐文章于 2022-06-29 10:34:19 发布

阅读量160

点赞数

本文链接：https://blog.csdn.net/qq_36823300/article/details/100833879

版权

Web 同时被 3 个专栏收录

23 篇文章 1 订阅

订阅专栏

Note

21 篇文章 0 订阅

订阅专栏

JavaScript

5 篇文章 0 订阅

订阅专栏

在Vue.js表单控件上实现双向数据绑定

在Vue.js中，可以在表单控件上使用v-model属性实现双向数据绑定。双向数据绑定是指表单控件的值与其绑定到的Vue模型属性值保持一致。无论谁改变了，另一方也会随之改变。

1、在input和textarea元素上实现双向数据绑定

在input和textarea元素上实现双向数据绑定。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>

    <div id="app">
        <p>input元素：</p>
        <input v-model="message" placeholder="输入message的值">
        <p>模型中message的值：{{ message }}</p>
        <p>模型中message2的值为：</p>
        <p style="white-space: pre">{{ message2 }}</p>
        <textarea v-model="message2" placeholder="输入message2的值"></textarea>
    </div>

<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            message: '模型中message的值',
            message2: '模型中message2的值'
        }
    })
</script>

</body>

</html>

在网页中定义了一个input元素，使用v-model属性将其双向绑定到模型的message属性。同时，模型的message属性还绑定到一个p元素中。

在网页中还定义了一个textarea元素，使用v-model属性将其双向绑定到模型的message2属性。同时，模型的message2属性还绑定到一个p元素中。

修改文本框中的内容，对应p元素的内容也会发生变化。这是因为input元素双向绑定到模型的message属性。修改它的内容。message属性的值也会随之变化，而p元素中的{{ message }}也绑定到了message属性，因此p元素的内容会随之变化。

同样修改textarea元素的内容，对应的p元素的内容也会发生变化。

2、在复选框上实现双向数据绑定

在复选框上实现双向数据绑定的实例。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>

    <div id="app">
        <p>input元素：</p>
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>
    </div>

<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            checked: false,
            checkedNames: []
        }
    })
</script>

</body>

</html>

在网页中定义了一个type="checkbox"的input元素，使用v-model属性将其双向绑定到模型的checked属性，也就是复选框的选中状态。同时，模型的checked属性还绑定到一个label元素中。

改变复选框的选中状态，对应元素的内容也会发生变化，这是因为input元素双向绑定到模型的checked属性。修改它的内容，checked属性的值也会随之改变，而元素中的{{ checked }}也绑定到了checked属性，因此元素的内容会随之变化。

在模型中使用数组同时绑定到多个复选框。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>

    <div id="app">
        <p>选择你喜欢的电商：</p>
        <input type="checkbox" id="suning" value="苏宁易购" v-model="checkedNames">
        <label for="suning">苏宁易购</label>
        <input type="checkbox" id="taobao" value="淘宝" v-model="checkedNames">
        <label for="taobao">淘宝</label>
        <input type="checkbox" id="jingdong" value="京东" v-model="checkedNames">
        <label for="jingdong">京东</label>
        <br>
        <span>选择的值为：{{ checkedNames }}</span>
    </div>

<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            checked: false,
            checkedNames: []
        }
    })
</script>

</body>

</html>

在网页中定义了3个type="checkbox"的input元素，分别用于选择苏宁易购、淘宝和京东。它们都使用v-model属性双向绑定到模型的checkedNames属性，也就是复选框的选中值。同时，模型checkedNames属性还绑定到一个span元素中。

改变复选框的选中状态，span元素的内容也会发生变化。

3、在select列表上实现双向数据绑定

在select列表上实现双向数据绑定。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>

    <div id="app">
        <select name="website" v-model="selected">
            <option value="">选择一个网站</option>
            <option value="www.baidu.com">百度</option>
            <option value="www.sougou.com">搜狗</option>
        </select>
        <br>
        <div id="output">
            选择的网站是：{{ selected }}
        </div>
    </div>

<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            selected: ''
        }
    })
</script>

</body>

</html>

在网页中定义了一个select元素，使用v-model属性将其双向绑定到模型的selected属性，也就是下拉列表的选中值。同时，模型的selected属性还绑定到一个div元素中。

选择不同的选项，对应div元素的内容也会发生变化。

4、在单选按钮上实现双向数据绑定

在单选按钮上实现双向数据绑定。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>

    <div id="app">
        <p>选择你喜欢的电商：</p>
        <input type="radio" id="taobao" value="淘宝" v-model="picked">
        <label for="taobao">淘宝</label>
        <br>
        <input type="radio" id="jingdong" value="京东" v-model="picked">
        <label for="jingdong">京东</label>
        <br>
        <span>选中值为：{{ picked }}</span>
    </div>

<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            picked: '淘宝'
        }
    })
</script>

</body>

</html>

在网页中定义了两个type="radio"的input元素，使用v-model属性将其双向绑定到模型的picked属性。同时，模型的picked属性还绑定到一个span元素中。

选择不同的选项，对应span元素的内容也会发生变化。

5、修饰符

在v-model属性后面的使用lazy、number和trim等3个修饰符。通过这些修饰符可以指定数据绑定的一些特性。

1）lazy修饰符

在默认情况下，v-model会在input事件中同步输入框的值与模型中数据。使用lazy修饰符后，将转变为在change事件中同步数据。也就是说，同步数据的时间滞后了一些。lazy修饰符的用法如下。

<input v-model.lazy="data">

2）number修饰符

number修饰符可以自动将用户输入的数据转换成数字类型（如果转换成NaN，则返回原值）。number修饰符的用法如下。

<input v-model.number="score" type="number">

3）trim修饰符

trim修饰符可以自动将用户输入的数据去掉收尾空格。trim修饰符的用法如下。

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

即将入土的羸弱老年人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js的使用

在Vue.js表单控件上实现双向数据绑定在Vue.js中，可以在表单控件上使用v-model属性实现双向数据绑定。双向数据绑定是指表单控件的值与其绑定到的Vue模型属性值保持一致。无论谁改变了，另一方也会随之改变。1、在input和textarea元素上实现双向数据绑定在input和textarea元素上实现双向数据绑定。<!DOCTYPE html><htm...
复制链接

扫一扫