一、插值

1.文本

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <!--引入Vue.js-->

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

<title>无标题文档</title>

</head>

<body>

    <span id="app1">Message: {{ msg }}</span><br>

    <span id="app2" v-once>这个将不会改变: {{ msg }}</span>

</body>

</html>

<script type="text/javascript">

    // 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。

    // Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。例如下面在app1中设置了msg的属性为“Hello World!”，在下面重新设置了属性值为“123456”，在页面中显示为123456。

    var app1 = new Vue({

        el: '#app1',

        data: {

            msg: 'Hello World!'

        }

    })

    app1.msg = '123456';

    // 通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定。下面的App2也重新设置了msg的值，但是页面中还是显示“你好!”，下面重新设置的属性值无效。

    var app2 = new Vue({

        el: '#app2',

        data: {

            msg: '你好!'

        }

    })

    app2.msg = '我很好';

</script>

显示结果如下：

2.原始Html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <!--引入Vue.js-->

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

<title>无标题文档</title>

</head>

<body>

    <div id="app1">

        <p>{{ html }}</p>

    </div>

    <div id="app2">

        <p v-html="html"></p>

    </div>

</body>

</html>

<script type="text/javascript">

    // 双大括号会将数据解释为普通文本，而非 HTML 代码。

    var app1 = new Vue({

        el: "#app1",

        data: {

            html: "<b style='color:red'>v-html</b>"

        }

    })

    // 为了输出真正的 HTML，你需要使用 v-html 指令：

    var app2 = new Vue({

        el: "#app2",

        data: {

            html: "<b style='color:red'>v-html</b>"

        }

    });

</script>

显示结果如下：

3.特性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <!--引入Vue.js-->

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

    <style type="text/css">

        .box box2{

            border:1px dashed #f0f;

        }

        .textColor{

            color:#f00;

            background-color:#eef;

        }

        .textSize{

            font-size:30px;

            font-weight:bold;

        }

    </style>

<title>无标题文档</title>

</head>

<body>

<ul class="box" v-bind:class="{'textColor':isColor, 'textSize':isSize}">

    <li>我要吃饭</li>

    <li>我要睡觉</li>

    <li>我要工作</li>

</ul>

<ul class="box2" :class="[isA?classA:'', classB]">

    <li>我要吃饭</li>

    <li>我要睡觉</li>

    <li>我要工作</li>

</ul>

</body>

</html>

<script type="text/javascript">

    // 如果 isColor、isSize 的值是 null、undefined 或 false，则 textColor、textSize 特性不会被包含在渲染出来的 <button> 元素中。

    var vm= new Vue({

        el:'.box',

        data:{

            isColor:true,

            isSize:true

        }

    })

    var vm2= new Vue({

        el:'.box2',

        data:{

            classA:'textColor',

            classB:'textSize',

            isA:false

        }

    })

</script>

效果图：

Vue模板语法V-bind的更多相关文章

  1. Vue模板语法(二)

    Vue模板语法(二) 样式绑定  class绑定 使用方式:v-bind:class="expression" expression的类型:字符串.数组.对象 1.2 style绑 ...

  2. Vue模板语法(一)

    Vue模板语法 一.插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达 ...

  3. Vue模板语法（一）

    Vue模板语法 一 vue简介 Vue.js是一套构建用户界面的渐进式框架. 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与 ...

  4. Vue 模板语法 && 数据绑定

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  5. 初始Vue、Vue模板语法、数据绑定（2022/7/3）

    文章目录 1.Vue简介 1.1.Vue的安装使用 1.2.实际的运用案例 1.3.vue开发工具的使用(这个需要在浏览器中安装) 2.初始Vue 2.1 .基础知识 2.1 .代码实例 2.2 .页 ...

  6. Vue模板语法（二）

    Vue基础模板语法 二 1. 样式绑定 1.1 class绑定      使用方式:v-bind:class="expression"       expression的类型:字符 ...

  7. (Vue)vue模板语法

    Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统. ...

  8. Vue模板语法与常用指令

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.在底层的实现上,Vue 将模板编译成虚拟 DOM 渲染函数,结合相应系统,在应用状态改变时 ...

  9. (32)Vue模板语法

    模板语法 文本: <span>Message: {{ msg }}</span> v-once 一次性地插值,当数据改变时,插值处的内容不会更新 <span v-once ...

  10. 11 - Vue模板语法

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. 所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML ...

随机推荐

  1. 一个Boss直聘机器人, 自动回复发简历

    goBoss 基佬github地址 这是基于go语言编写的一款boss直聘机器人软件(牛人版).附上Python版本, 无需配置Go环境, 我会提供windows和macos的可执行程序.不喜勿喷O( ...

  2. telnet协议：简介与安装使用

    Telnet简介 Telnet协议是TCP/IP协议族中的一员,是Internet远程登陆服务的标准协议和主要方式.它为用户提供了在本地计算机上完成远程主机工作的能力.在终端使用者的电脑上使用teln ...

  3. 用信鸽来讲解HTTPS的知识

    加密是一个很难理解的东西,这里头满是数学证明.不过,除非你是在开发一个加密系统,否则无需了解那些高阶的复杂知识. 如果你看这篇文章是为了创造下一个 HTTPS 协议,很抱歉,请出门左走,鸽子是远远不够 ...

  4. beef局域网内模拟攻击

    0x0环境 主机A win10:10.51.20.60(wifi) 主机A中的虚拟机kali(攻击者):192.168.110.129(NAT) 主机A中的虚拟机win2003(受害者):192.16 ...

  5. [2017BUAA软工助教]结对组队

    请同学们把第一次结对编程双方的学号评论在本博客下,只要一位同学评论即可.例如: 14061195 + 14061183

  6. linux 内核 第四周 扒开系统调用的三层皮 上

    姬梦馨 原创作品 http://mooc.study.163.com/course/USTC-1000029000 一.用户态.内核态和中断处理过程 用户通过库函数与系统调用联系起来:库函数帮我们把系 ...

  7. 解决eclipse中mybatis的xml配置文件无代码提示问题

    https://blog.csdn.net/IRainReally/article/details/81743506

  8. 正则js

    匹配中文字符的正则表达式: [\u4e00-\u9fa5] 匹配双字节字符(包括汉字在内):[^\x00-\xff] 匹配空行的正则表达式:\n[\s| ]*\r 匹配HTML标记的正则表达式:/&l ...

  9. 转 kvm、qemu-kvm、ibvirt及openstack,之间的关系

    KVM是最底层的hypervisor,它是用来模拟CPU的运行,它缺少了对network和周边I/O的支持,所以我们是没法直接用它的. QEMU-KVM就是一个完整的模拟器,它是构建基于KVM上面的, ...

  10. [日常工作] 并行计算引发Microsoft.jscript.ni.dll的内存溢出问题的分析解决. .net framework 的版本说明

    1. 性能组进行 单点性能测试时发现 商务智能的 并行分析有问题. 效率很低, 开发人员查看iis 的日志 发现错误原因是 Microsoft.jscript.ni.dll 有内存溢出的问题 开发人员 ...