一、插值

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. C# 导入（读取） WPS ET文件

    本文章介绍基于VS2010 Winform 的WPS2016二次开发 ET数据读取程序 本程序支持多个Sheet页面 前提:引用WPS安装目录下的etapi.dll private void butt ...

  2. 微软职位内部推荐-Senior Dev Lead - SharePoint

    微软近期Open的职位: SharePoint is a multi-billion dollar enterprise business that has grown from an on-prem ...

  3. 作业五：分析system_call中断处理过程

    分析system_call中断处理过程 一.MesuSO增加getpid和getpid-asm 二.使用GDB跟踪系统调用内核函数sys_getpid 分析system_call中断处理过程 使用gd ...

  4. js生成uuid代码

    function uuid() { var s = []; var hexDigits = "0123456789abcdef"; for (var i = 0; i < 3 ...

  5. springboot项目的创建

    创建springboot项目 包名和项目名 选择需要使用的框架,web 然后再点击下一步,完成即可创建springboot项目

  6. ELK Stack (2) —— ELK + Redis收集Nginx日志

    ELK Stack (2) -- ELK + Redis收集Nginx日志 摘要 使用Elasticsearch.Logstash.Kibana与Redis(作为缓冲区)对Nginx日志进行收集 版本 ...

  7. Alpha 冲刺八

    团队成员 051601135 岳冠宇 051604103 陈思孝 031602629 刘意晗 031602248 郑智文 031602234 王淇 会议照片 项目燃尽图 项目进展 完善各自部分 项目描 ...

  8. [CB]Intel 2018架构日详解：新CPU&新GPU齐公布 牙膏时代有望明年结束

    Intel 2018架构日详解:新CPU&新GPU齐公布 牙膏时代有望明年结束 北京时间12月12日晚,Intel在圣克拉拉举办了架构日活动.在五个小时的演讲中,Intel揭开了2021年CP ...

  9. PSP（3.16——3.22）以及周记录

    3.17 13:30 14:45 15 60 讨论班 A Y min 14:50 17:05 5 130 得到设备 Cordova 蓝牙连接 A Y min 23:15 23:45 5 25 英语百词 ...

  10. 微信小游戏 4M升8M分包加载

    一.微信分包加载 微信分包加载教程 嘛,因为原来的4M太小了,满足不了小游戏内容的需求,现在提升到了8M.这8M可以分包加载,而不需要一次性加载8M. 如果是老版本,则分包加载不起作用,会一次加载8M ...