Vue模板语法V-bind

一、插值

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" />
    
    <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>

显示结果如下:

Vue模板语法V-bind_第1张图片

 

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" />
    
    <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: "v-html"
        }
    })

    // 为了输出真正的 HTML,你需要使用 v-html 指令:
    var app2 = new Vue({
        el: "#app2",
        data: {
            html: "v-html"
        }
    });

script>

显示结果如下:

Vue模板语法V-bind_第2张图片

 

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" />
    
    <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 特性不会被包含在渲染出来的 

效果图:

Vue模板语法V-bind_第3张图片

 

转载于:https://www.cnblogs.com/Strive-count/p/9637457.html

你可能感兴趣的:(Vue模板语法V-bind)