vue中多行文本标签_vue 模板语法

插值

文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

Message: { { msg }}

Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。即便数据内容为一段 html 代码，仍然以文本内容展示

例：

vue template

文本插值 { {html_str}}

//只要引入vue框架，就会全局有个vue对象，这个对象是应用的根对象

var app = new Vue({

// 设置要操作的元素

el: '#div',

// 要替换的额数据

data: {

html_str:'

Vue

'

}

});

//打印vue实例

console.log(app);

浏览器渲染结果：文本插值

Vue

打开浏览器的 REPL 环境 输入 app.html_str = 'vue',结果如下

使用 JavaScript 表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持，但是不能使用 JS 语句；

(表达式是运算，有结果；语句就是代码，可以没有结果)

例：

vue template

{ { un > 3 ? '大' : '小'}}

{ { fun() }}

var app = new Vue({

el:'#div',

data: {

un: 2,

fun: function () {

return 1 + 2;

}

}

})

运行结果

指令

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM；参考 手册 、 API

现在你看到我了

var app = new Vue({

el:'#div',

data:{

seen:true

}

})

这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除

元素。

例：

正常显示

改为false

不显示

v-text / v-html 文本

错误代码

vue template

var app = new Vue({

el:'#div',

data:{

seen:'

Vue

',

str_html:'

Vue

',

class:'dd',

}

})

运行结果

去掉TML 属性用 { {}}的正确代码

vue template

var app = new Vue({

el:'#div',

data:{

seen:'

Vue

',

str_html:'

Vue

',

class:'dd',

}

})

注意：

v-text

v-text和差值表达式的区别

v-text 标签的指令更新整个标签中的内容(替换整个标签包括标签自身)

插值表达式，可以更新标签中局部的内容

v-html

<