Vue.js中v-bind v-model的使用和区别

秒速五厘米 2022-06-17 04:47 106阅读 0赞

`v-model` 指令在表单控件元素上创建双向数据绑定,所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据

最基础的就是实现一个联动的效果

![复制代码][copycode.gif]

<body>
        <div class="app">
            <span>Multiline message is:</span>
            <p>{
       {message}}</p>
            <br>
            <textarea name="" v-model="message" placeholder="please write..."></textarea>
        </div>
    
    </body>
    <script>
       new Vue({
             el:'.app'
       })
    </script>

![复制代码][copycode.gif]

checkbox

![复制代码][copycode.gif]

<body>
        <div class="app">
            <input type="checkbox" id="jack" value="jack" v-model="checkedNames">
            <label for="jack">jack</label>
            <input type="checkbox" id="John" value="John"  v-model="checkedNames">
            <label for="jack">John</label>
            <input type="checkbox" id="Mike" value="Mike"  v-model="checkedNames">
            <label for="jack">Mike</label>
            <br>
            <span>Checked names:{
       {checkedNames}}</span>
        </div>
        
    </body>
    <script>
       new Vue({
             el:'.app',
             data:{
                 checkedNames:[]
             }
       })
    </script>

![复制代码][copycode.gif]

v-bind

有些指令可以在其名称后面带一个“参数” (Argument)，中间放一个冒号隔开。例如，v-bind 指令用于响应地更新 HTML 特性

[copycode.gif]: /images/20220617/e3b2032edd534bf5b728d64e40d82d1c.png

发表评论取消回复

表情：

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

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

相关阅读

相关 vuejs+layui的使用

Vue2+VueRouter2+webpack+Axios 构建项目实战目录以及文件结构][Vue2_VueRouter2_webpack_Axios] 之前在项目中一...

矫情吗；*/ 2024年04月18日 15:29/ 0 赞/ 43 阅读

相关 vuejs里：style和：class的区别（vue动态操作class和style）

[https://cn.vuejs.org/v2/guide/class-and-style.html][https_cn.vuejs.org_v2_guide_class-a

「爱情、让人受尽委屈。」/ 2022年11月12日 08:26/ 0 赞/ 218 阅读

相关【Vuejs】Vuejs 中避免滥用 this 读取 data 中数据

![0974f3162e9813dc5f58074756139b49.png][] 作者：红尘炼心 https://juejin.cn/post/6934911314871

本是古典何须时尚/ 2022年10月19日 05:43/ 0 赞/ 179 阅读

相关 vuejs 的watch 和 $emit

vue有很多像watch，prop，emit等这种api，自己看官网现在给出两个简单的例子： watch 有两种，一种是深度监听，一种是浅度监听 watch

悠悠/ 2022年06月12日 14:43/ 0 赞/ 417 阅读

相关【VueJS】实例中data属性的三种写法及区别

data属性的三种写法 1、\_\_ <script type="text/javascript"> var app=new Vue({ el:'app', d

痛定思痛。/ 2022年06月02日 04:16/ 0 赞/ 107 阅读

相关 vuejs的：is和is使用和区别

在vue.js组件教程的一开始提及到了`is特性：：` 意思就是有些元素，比如ul里面只能直接包含li元素，像这样： <ul> <li></l

雨点打透心脏的1/2处/ 2022年05月24日 06:49/ 0 赞/ 160 阅读

相关 vuejs的render方法使用

非使用渲染方法的情况完整代码： <!DOCTYPE html> <html> <head> <title>Vue的r

偏执的太偏执、/ 2022年05月24日 04:55/ 0 赞/ 211 阅读

相关 C++中“.”和“->”的使用区别

这两个符号都是[C++成员运算符][C]，主要用于确定类对象和成员之间的关系，用于引用类、结构和共用体的成员。点运算符“.”应用于实际的对象，箭头运算符“->”与一个指针对

曾经终败给现在/ 2022年05月22日 20:09/ 0 赞/ 223 阅读

相关 vuejs中v-if和v-show

简单来说，v-if 的初始化较快，但切换代价高；v-show 初始化慢，但切换成本低区别 v-if是动态的向DOM树内添加或者删除DOM元素； v-show是通过设

短命女/ 2022年02月26日 00:42/ 0 赞/ 134 阅读

相关 VueJS中学习使用Vuex详解

[转载https://segmentfault.com/a/1190000015782272][https_segmentfault.com_a_119000001578227

梦里梦外;/ 2021年09月30日 05:58/ 0 赞/ 340 阅读