Vue中v-model与v-bind区别_vue model bind_笋干zzZ~的博客-程序员宅基地

Vue中v-model与v-bind区别：

绑定数据的三种方式:
{ {}}从data中取对应的值
v-model：
v-bind：
v-model
主要用于表单元素，实现了双向绑定。在同时使用v-model和v-bind中，v-model能建立双向绑定并且对input，select，textarea具有优先权，而在checkbox中v-bind具有优先权。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<body>
    <div id="vm">
       <input type="text" v-model="title"><br>
        {
   {title}}
    </div>
    <script>
        var vm=new Vue({
     
            el:"#vm",
            data:{
     
               title:"hello vue"
            }
        });
    </script>
</body>
</htm

v-bind
eg:v-bind:href可以简写为:href
当加上v-bind:之后href的值不是字符串，而实vue实例data.link的这个变量，也就是data.link是什么值，href就是得到什么值，当data.link变化而变化的href，这非常适合通过css来实现动画效果，是单向的变动。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
<body>
    <div id="vm">
        <a href="link">baidu</a>
        <input v-model="link">baidu</input>
        <a v-bind:href="link">baidu</a>
        <a :href="link">baidu</a>
    </div>
    <script>
        var vm=new Vue({
     
            el:"#vm",
            data:{
     
               link:"http://www.baidu.com"
            }
        });
    </script>
</body>
</html>

本文链接：https://blog.csdn.net/sungancd/article/details/118500269

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Linux配置Nginx服务器-程序员宅基地

文章浏览阅读2.8k次，点赞5次，收藏10次。配置Nginx简介与Apache类似,Nginx支持多种虚拟机配置方式，如基于IP地址的虚拟主机和基于域名的虚拟主机配置，本篇博客主要以基于域名的虚拟主机配置为例。安装Nginx服务器：https://blog.csdn.net/qq_46323758/article/details/116351553配置Nginx服务器一、配置IP地址1、配置IP地址ifconfig ens33 192.168.100.100二、新建目录及配置文件1、新建目录:在/usr/local/nginx/con

actionscript快速学习指南-程序员宅基地

文章浏览阅读1.2k次。 Ascriptaction,是adobe的编程语言，在2010年4月的开发语言排行榜上较3月份晋升2位，已高举19位了，现在通常都称之为as3。as3是flash、flex和air等开发复杂应用的基石，因此不管是搞flash、air还是当前颇为流行的flex，都必须熟练掌握as3。本文命名为“actionscript快速学习指南”，稍显托大，却是衷心希望能助初学者快速掌握as3。

Qt 小技术总结-持续更新-程序员宅基地

文章浏览阅读102次。//设置应用程序的光标为标准的等待光标（通常是一个沙漏）QApplication::setOverrideCursor(Qt::WaitCursor); \r 回车(CR) 013\t 水平制表(HT) 009 //QMainWindow中设定中央窗口部件的方法setCentralWidget(widget); -----以下方法在窗口不可见的时候，没有任...

三星单片机 c语言教程,ARM裸机第一部分-ARM那些你得知道的事儿-程序员宅基地

文章浏览阅读148次。整个核心课程学习路线图很庞大，为了描述简单我把目录分成了几个层次，请大家分层浏览。第一层目录：0.基础预科1.ARM裸机全集2.uboot和linux内核移植3.linux应用编程和网络编程4.C语言专题精讲篇5.linux驱动开发6.阶段项目篇说明：第一层目录中共有6个部分，共同构成了嵌入式核心课程。每个部分下面又会分为若干模块，以此来构建出整个知识体系网络。第二层目录：0.基础预科0.1.嵌入..._三星单片机开发环境使用

C/C++ BMP（24位真彩色）图像处理（4）------图像の旋转-程序员宅基地

文章浏览阅读8.4k次，点赞8次，收藏17次。历经一个多月，CSDN貌似终于好像把文章列表阅读量信息归零BUG给修好了，于是乎放篇做期末大作业时写的文章上来测测效果，可别又像上次一样一发文章就又坑爹了啊！本篇谈的是图像的旋转，不算是什么新鲜的题目了。但是现在由于很多工具如MATLAB、OPENCV等都把算法写好给用户调用，导致大多用户只知其然不知其所以然，所以回顾一下也是好的。图像的旋转，说到底就是每个像素点绕着某个圆心旋转一定角度。

redis基础3——配置文件详解_redis配置文件-程序员宅基地

文章浏览阅读1.6k次。redis配置文件细读解说，核心参数实测效果说明，以及持久化的核心参数用法详解。_redis配置文件

随便推点

redis性能问题及关键指标_redis性能指标-程序员宅基地

文章浏览阅读1.1k次。基础Redis是什么？Redis 是一个开源（BSD许可）的，内存中的数据结构存储系统，它可以用作数据库、缓存和消息中间件Redis为什么是CP？nosql - Redis availability and CAP theorem - Stack Overflow缓存雪崩、缓存穿透、缓存击穿外文的解释：What is cache penetration, cache breakdown and cache avalanche?引自：缓存穿透，缓存击穿，缓存雪崩解决方案分析_z_redis性能指标

vue -- watermark添加水印工具类_vue watermark.js-程序员宅基地

文章浏览阅读1.1k次。1、在utils文件夹下新建watermark.js工具类：watermark.js工具类对应代码：const watermark = {}const setWatermark = (str) => { const id = '1.8989898989898989.123412416' if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementBy_vue watermark.js