Vue：双向绑定（狂神）

最新推荐文章于 2023-06-10 15:14:02 发布

喵俺第一专栏

最新推荐文章于 2023-06-10 15:14:02 发布

阅读量151

点赞数

分类专栏： # Vue总结文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/dengfengling999/article/details/125468813

版权

Vue总结专栏收录该内容

43 篇文章 3 订阅

订阅专栏

Vue双向绑定

在这里插入图片描述

（1）input 标签文本输入框：双向绑定

demo05.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<!--view层，模板-->
 <div id="app">
     输入文本：<input type="text" v-model="message" >{{message}}
 </div>

 <script>
     var vm=new Vue({
         //绑定app
         el:"#app",
         //Model:数据
         data:{
             message:"123"
         }
     });
 </script>

</body>
</html>

在这里插入图片描述
随便输入数据：

在控制台输入动态输入数据：

（2）textarea标签多行输入框：双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<!--view层，模板-->
 <div id="app">
     <textarea name="" id="" cols="10" v-model="message">
         输入文本：
     </textarea>
     {{message}}
 </div>

 <script>
     var vm=new Vue({
         //绑定app
         el:"#app",
         //Model:数据
         data:{
             message:"123"
         }
     });
 </script>

</body>
</html>

在这里插入图片描述

（3）radio标签单选按钮：双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<!--view层，模板-->
 <div id="app">
     性别：
     <input type="radio" name="sex" value="男" v-model="xuanzhong"> 男
     <input type="radio" name="sex" value="女"  v-model="xuanzhong"> 女
     <p>
         选中了谁：{{xuanzhong}}
     </p>

 </div>

 <script>
     var vm=new Vue({
         //绑定app
         el:"#app",
         //Model:数据
         data:{
             xuanzhong:""
         }
     });
 </script>

</body>
</html>

在这里插入图片描述
点击男：

点击女：

（4）select标签下拉列表：双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
<!--view层，模板-->
 <div id="app">
     下拉框：
     <select name="" v-model="selected">
         <option value="" disabled>--请选择--</option>
         <option>A</option>
         <option>B</option>
         <option>C</option>
     </select>

     <span>value:{{selected}}</span>

 </div>

 <script>
     var vm=new Vue({
         //绑定app
         el:"#app",
         //Model:数据
         data:{
             selected:""
         }
     });
 </script>

</body>
</html>