一、插值

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. PAT甲题题解-1039. Course List for Student (25)-建立映射+vector

    博主欢迎转载,但请给出本文链接,我尊重你,你尊重我,谢谢~http://www.cnblogs.com/chenxiwenruo/p/6789157.html特别不喜欢那些随便转载别人的原创文章又不给 ...

  3. android开发之使用SQLite数据库存储

    http://blog.csdn.net/jason0539/article/details/16360835 SQLite 介绍 SQLite 一个非常流行的嵌入式数据库,它支持 SQL 语言,并且 ...

  4. Android开发环境的发展演变调研

    Android开发环境的发展演变调研 前几年比较多的方法是用JDK+eclipse+ADT,该方法除了要配置JDK的路径之外, 还要在eclipse里面打开SDK Manage进行相应的操作.不过近两 ...

  5. Android开发环境（发展演变）

    初步接触android,要安装android开发工具时是使用eclipse,这是因为百度靠前的搜索项是eclipse来开 发android,而且那时还不知道android studio. 首先是下载配 ...

  6. 04-java学习-选择结构

    if if else 多重if switch

  7. Beta冲刺——day3

    Beta冲刺--day3 作业链接 Beta冲刺随笔集 github地址 团队成员 031602636 许舒玲(队长) 031602237 吴杰婷 031602220 雷博浩 031602134 王龙 ...

  8. Linux命令（十九） 查看系统负载 uptime

    一.命令介绍 Linux 系统中 uptime 命令主要用于获取主机运行时长和查询Linux系统负载等信息. uptime 命令可以显示系统已经运行了多长时间,信息显示依次为:现在时间.系统已经运行时 ...

  9. 【转帖】 redis 命令 From https://www.cnblogs.com/zhouweidong/p/7550717.html

    redis命令详解   redis中添加key value元素:set key value;       获取元素:get key ;   redis中添加集合:lpush key value1 va ...

  10. js & parseFloat & toFixed

    js & parseFloat & toFixed https://repl.it/languages/javascript https://repl.it/repls/MintyBa ...