龙行博客

走路看风景,经历看人生,岁月留痕迹,人生留轨迹,17的历史,18的豪情,时间的匆忙,人生的风景,放开心胸往前走,成功再远行,放开理想往前走,梦想再行动。
现在位置:首页 > 编程语言 > web前端 > vue 表单v-model数据双向绑定,vue继续爬

vue 表单v-model数据双向绑定,vue继续爬

龙行    web前端    2019-2-22    649    2评论    本文已被百度收录点击查看详情

1.了解vue数据双向绑定

vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也算是vue的精髓之处了。值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的,非UI控件不会涉及到数据双向绑定。 单向数据绑定是使用状态管理工具(如redux)的前提。如果我们使用vuex,那么数据流也是单项的,这时就会和双向数据绑定有冲突,


2.为什么要实现数据的双向绑定,有何作用?


在vue中,如果使用vuex,实际上数据还是单向的,之所以说是数据双向绑定,这是用的UI控件来说,对于我们处理表单,vue的双向数据绑定用起来就特别舒服了。


即两者并不互斥, 在全局性数据流使用单项,方便跟踪; 局部性数据流使用双向,简单易操作。

这些原理百度一大把,理解就好,还是看看怎么实现吧


<script src="http://how2j.cn/study/vue.min.js"></script>
    
<style>
table tr td{
    border:1px solid gray;
    padding:10px;
     
}
table{
    border-collapse:collapse;
    width:800px;
    table-layout:fixed;
}
tr.firstLine{
    background-color: lightGray;
}
</style>
  
<div id="div1">
    
    <table align="center" >
        <tr class="firstLine">
            <td>视图类型</td>
            <td>输入数据</td>
            <td>绑定到Vue上的数值</td>
        </tr>       
        <tr>
            <td>
                单行文本
            </td>
            <td>
                <input v-model="input" placeholder="输入数据">
            </td>
            <td>
                <p>{{ input }}</p>   
            </td>
        </tr>
        <tr>
            <td>
                多行文本
            </td>
            <td>
                <textarea v-model="textarea" placeholder="输入数据"></textarea>
            </td>
            <td>
                <p>{{ textarea }}</p>   
            </td>
        </tr>
        <tr>
            <td>
                单个复选框
            </td>
            <td>
                <input type="checkbox" id="checkbox" v-model="checked">
            </td>
            <td>
                <p>{{ checked }}</p>   
            </td>
        </tr>
        <tr>
            <td>
                多个复选框
            </td>
            <td>
                  <input type="checkbox" id="teemo" value="teemo" v-model="checkedes">
                  <label for="teemo">teemo</label>
                  <input type="checkbox" id="gareen" value="gareen" v-model="checkedes">
                  <label for="gareen">gareen</label>
                  <input type="checkbox" id="annie" value="annie" v-model="checkedes">
                  <label for="annie">annie</label>
            </td>
            <td>
                <p>{{ checkedes }}</p>   
            </td>
        </tr>
        <tr>
            <td>
                单选按钮
            </td>
            <td>
              <input type="radio" id="one" value="One" v-model="radio">
              <label for="one">One</label>
              <br>
              <input type="radio" id="two" value="Two" v-model="radio">
              <label for="two">Two</label>
            </td>
            <td>
                <p>{{ radio }}</p>   
            </td>
        </tr>
        <tr>
            <td>
                单选选择框
            </td>
            <td>
              <select v-model="selected" size="5">
                <option disabled value="">请选择</option>
                <option>AD</option>
                <option>AC</option>
                <option>ADC</option>
              </select>
            </td>
            <td>
                <p>{{ selected }}</p>   
            </td>
        </tr>
        <tr>
            <td>
                多选选择框
            </td>
            <td>
              (通过ctrl或者shift进行多选)<br>
              <select v-model="selecteds" multiple size="5">
                <option disabled value="">请选择</option>
                <option>AD</option>
                <option>AC</option>
                <option>ADC</option>
              </select>
            </td>
            <td>
                <p>{{ selecteds }}</p>   
            </td>
        </tr>
        <tr>
            <td>
                单个复选框
            </td>
            <td>
                默认值是true或者false,也可以修改为自定义的值<br>
                <input type="checkbox" id="toggle" true-value="yes" false-value="no" v-model="toggle">
            </td>
            <td>
                <p>{{ toggle }}</p>   
            </td>
        </tr>       
 
    </table>
  
</div>
     
<script>
   
new Vue({
      el: '#div1',
      data: {
          input:'',
          textarea:'',
          checked:'',
          checkedes:[],
          radio:'',
          selected:'',
          selecteds:[],
          toggle:'',
           
      }
    })
     
</script>


以后有什么表单操作就可以拿这个来扩展.记录


评论一下 分享本文 赞助站长

赞助站长X

扫码赞助站长
联系站长
龙行博客
  • 版权申明:此文如未标注转载均为本站原创,自由转载请表明出处《龙行博客》。
  • 本文网址:https://www.liaotaoo.cn/171.html
  • 上篇文章:php常用自定义函数收集
  • 下篇文章:从零开始搭建vue-cli脚手架_超详细步骤
  • js jquery vue
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论
www.magicessay.org
www.magicessay.org2019-03-31 16:56回复
#1
整个代码足够冗长。我在第一顺位不明白。因为它需要深入工作。
龙行
龙行2019-03-31 23:05回复
@www.magicessay.org:确实冗长,复制下来放在ide研究下就行了
快捷导航
联系博主
在线壁纸
给我留言
光羽影视
音乐欣赏
返回顶部