一、插值

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. ping命令使用及其常用参数

    PING (Packet Internet Groper),因特网包探索器,用于测试网络连接量检查网络是否连通,可以很好地帮助我们分析和判定网络故障.Ping发送一个ICMP(Internet Con ...

  2. VC++ MFC程序设置以管理员权限运行

    1.引入资源文件 (.manifest文件),文件中的 name 值为程序全称.exe:文件内容如下: <?xml version="1.0" encoding=" ...

  3. 《Linux内核分析》课程第二周学习总结

    姓名:何伟钦 学号:20135223 ( *原创作品转载请注明出处*) ( 学习课程:<Linux内核分析>MOOC课程http://mooc.study.163.com/course/U ...

  4. 作业三：LINUX内核的启动过程

    作业三:LINUX内核的启动过程 一.使用GDB跟踪内核从start_kernel到init进程启动(附实验截图) (一)使用自己的Linux系统环境搭建MenuOS的过程 下载内核源代码编译内核 c ...

  5. Beta阶段冲刺-4

    一. 每日会议 1. 照片 2. 昨日完成工作 3. 今日完成工作 4. 工作中遇到的困难 杨晨露:热......算不算困难......? 戴志斌:找了好几种框架,改了不少 游舒婷:不能相信开发工具自 ...

  6. WPF使用路径（URI）引用资源文件

    Uri uri = new Uri("pack://application:,,,/程序集名称;component/Resources/bj.png", UriKind.Absol ...

  7. ping出现dup问题

    华为交换机收到mac地址漂移告警:  Dec 24 2018 16:48:22+08:00 HW5320 %%01SECE/4/UCSUPPRESSRESUME(l) [66]:MAC address ...

  8. [转帖]QEMU和QEMU-KVM的关系

    QEMU和QEMU-KVM的关系 https://blog.csdn.net/shengxia1999/article/details/52244119   版权声明:本文为博主原创文章,未经博主允许 ...

  9. [转帖]Linux系统/dev/mapper目录浅谈

    Linux系统/dev/mapper目录浅谈   Linux系统的一般的文件系统名称类似于/dev/sda1或/dev/hda1,但是今天在进行系统维护的时候,利用df -h 命令敲出了/dev/ma ...

  10. Java == ,equals 和 hashcode 的区别和联系(阿里面试)

    今天阿里的人问我 equals 与hashcode的区别,我答不上来, 仔细查了一下,做了总结: (1) == 这是Java 比较内存地址,就是内存中的对象: java中的==是比较两个对象在JVM中 ...