vue的v-model

一时失言乱红尘 2021-11-27 04:10 109阅读 0赞

## v-model存在的问题 ##

对于复选框或者单选框的常见组件时，由于v-model默认传的是value，不是checked，触发事件也不是oninput而是onchange

我做了个小测试

html页面

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>测试</title>
        <link rel="stylesheet" href="http://at.alicdn.com/t/font_685761_h0xgwcedyyq.css">
        <script src="js/vue.js"></script>
        <script src="js/test.js"></script>
      </head>
      <body>
        <div id="app">
          显示<input type="radio" name="1" value="true" v-model='display'>
          隐藏<input type="radio" name="1" value=""  v-model='display'>
          <div v-if='display'>小窝窝哈哈哈哈</div>
          <div>{
       {innerText}}</div>
          <div v-html='innerHTML'></div>
        </div>
      </body>
    </html>

js

window.onload = function(){
        var dataList = {
            innerText:'欢迎来到我的小家',
            innerHTML:'欢迎来到<i style=color:red>我的小家</i>',
            name:'Coco',
            display:true
        }
        new Vue({
            el:'#app',
            data:dataList
        })
    }

分析：

display的初始化值是true,这里的true可以是任意非空字符串

打开该页面首先是该div块![20190723174716456.png][]展示

，点击切换隐藏、显示div则会隐藏显示，因为display的值在切换按钮之后发生了变化

[20190723174716456.png]: /images/20211126/61dc415dcc0344f68dbb0ce52b7ae760.png

发表评论取消回复

表情：

评论列表（有 0 条评论，109人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue：vue2与vue3的区别

一、背景 vue2是指的2.X vue3是指的3.0以及更新的版本（3.2版本在script标签里可以写setup，极大的简化了开发）本文对比两者区别。二、官网

た入场券/ 2024年03月26日 14:52/ 0 赞/ 80 阅读

相关【Vue.js】015-Vue：Vue中的MVVM、Vue的options选项

目录三、Vue中的MVVM 1、MVVM概述 2、Vue中的MVVM 结构图示：实例图示：四、Vue的options选项 1、参考文档 2、先掌握三个

太过爱你忘了你带给我的痛/ 2023年10月05日 02:52/ 0 赞/ 54 阅读

相关【Vue】Vue中的Virtual DOM

目录 1. 什么是虚拟DOM? 2. 模板转化为视图的过程 3. 虚拟DOM的优势 4

旧城等待，/ 2023年03月06日 03:26/ 0 赞/ 24 阅读

相关 Vue笔记-Ant Design Vue的使用（Vue3）

这里文档要这样看： ![20210420175826573.png][] 这里 npm install ant-design-vue@2.0.0-rc.3 -sa

亦凉/ 2023年01月14日 12:58/ 0 赞/ 312 阅读

相关 Vue---Vue.use(param)的使用

Vue.use(param)后会自动执行param的install()方法。通过Vue.use(param)来封装一个工具类。 util.js //工具类

冷不防/ 2022年12月27日 08:17/ 0 赞/ 150 阅读

相关 Vue_Vue的生命周期

Vue的生命周期：Vue实例的创建、运行、到销毁称为vue的生命周期 8个阶段： beforeCreate():创建之前，获取不到数据和methods;初始化中，初始化

ゝ一世哀愁。/ 2022年12月10日 08:43/ 0 赞/ 223 阅读

相关【Vue】—Vue的模板语法

【Vue】—Vue的模板语法 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM

た入场券/ 2022年09月03日 05:25/ 0 赞/ 230 阅读

相关 Vue学习笔记——Vue的坑

1、v-for的坑： vue低版本中 data里面的items和computed里面可以一样，但是高版本，是不允许相同名称。 2、\{ \{\}\}和v-text

小灰灰/ 2022年05月19日 02:52/ 0 赞/ 224 阅读

相关 Vue中的vue-router

文章目录官网 vue-router的使用源码结果分析作用：在一个系统中往往会有很多的页面组成

左手的ㄟ右手/ 2022年04月22日 11:10/ 0 赞/ 237 阅读

相关 Vue-vue.js概述，vue的安装及创建vue实例

vue.js 是什么是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，`Vue` 采用自底向上增量开发的设计。 `Vue` 的核心库只关注视图层，

谁践踏了优雅/ 2021年12月01日 15:02/ 0 赞/ 386 阅读