一、插值

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. 容器flappybird游戏——图文操作指引贴

    第一步:打开华为云容器引擎产品首页,点击免费体验馆   第二步:进入免费体验馆,点击体验按钮,获得3天免费集群     第三步:创建免费集群完成后,进入产品console页,如图所示:   第四步:如 ...

  2. PHP学习 文件访问和写入

    <?php $path = $_SERVER['PHP_SELF']; //PHP_SELF:当前执行脚本的文件名,与 document root 有关 echo basename($path) ...

  3. 5分钟让你明白HTTP协议

    一.HTTP简介 1.http协议介绍 HTTP协议(HyperText Transfer Protocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议,所有的WWW文件都必须遵守这个标 ...

  4. error: Build input file cannot be found: '*******/node_modules/react-native/Libraries/WebSocket/libfishhook.a' 问题解决记录

    解决了刚才的'config.h' file not found问题,本以为就可以顺畅的跑起来,谁知道又被恶心到了,Build input file cannot be found!!! 问题: err ...

  5. NBPL团队总结

    我们团队钱多多记账软件项目从2017年12月号开始,历时两个周.这两个周,我们从头学起,学到了很多新的知识,对一些概念有了认知,关于团队协作,关于团队建设,关于Android开发.回顾前两周,我们一致 ...

  6. Leetcode——30.与所有单词相关联的字串【##】

    @author: ZZQ @software: PyCharm @file: leetcode30_findSubstring.py @time: 2018/11/20 19:14 题目要求: 给定一 ...

  7. TensorFlow常用API汇总

    1.tensorflow的基本运作为了快速的熟悉TensorFlow编程,下面从一段简单的代码开始: import tensorflow as tf #定义‘符号’变量,也称为占位符 a = tf.p ...

  8. NPM和Yarn添加淘宝镜像

    NPM设置淘宝镜像 1.查询当前配置的镜像 npm get registry > https://registry.npmjs.org/ 设置成淘宝镜像 npm config set regis ...

  9. Apache ActiveMQ 学习一

    Apache ActiveMQ 5.8.0 Java 7 support (compiled with jdk6 and validated with jdk7) apache-activemq-5. ...

  10. [转帖]PG的简单备份恢复 找时间进行测试

    转帖PG的简单使用 https://blog.csdn.net/lk_db/article/details/77971634 一: 纯文件格式的脚本: 示例:1. 只导出postgres数据库的数据, ...