<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>模板语法</title>
</head>
<body>
<div class="app">
<!--文本：-->
<span>Message: {{ msg }}</span>
<!--无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。-->
<span v-once>Message: {{ msg }}</span>
<!--通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。-->
<!--但请留心这会影响到该节点上所有的数据绑定：-->
<!--html-->
<span v-html="title"></span>
<!--为了输出真正的 HTML ，你需要使用 v-html 指令-->
<!--属性-->
<button v-bind:disabled="state">Button</button>
<!--如果state等于true那么button被禁用，否则false启用-->
<!--指令-->
<p v-if="seen">现在你看到我了</p>
<!--如果senen等于true p就渲染 否则不渲染-->
<!--修饰符(阻止事件a链接跳转，执行onclick事件)-->
<a v-bind:href="url" v-on:click.prevent="a"></a>
<!---过滤器-必须用 filters->//过滤器可以串联：可以接受参数-->
<b>{{b | forB | forC('斜体',age)}}</b>
<div v-bind:title="msg | forB | forC('斜体',age)">也可以绑定在元素上</div>
<!--过滤器函数总接受表达式的值作为第一个参数。-->
<!--缩写-->
<a v-bind:href="url"></a>
<a :href="url"></a>
<a v-on:click="doSomething"></a>
<a @click="doSomething"></a>
</div>
</body>
<script src="js/vue.js" charset="utf-8"></script>
<script type="text/javascript">
var data = {
msg: '你好吗？',
title: '<h1>我是标题</h1>',
state: false,
seen: true,
url: 'www.baidu.com',
b: '加粗',
};
new Vue({
el: '.app',
data: data,
methods: {
a: function() {
alert("我是修饰符的事件");
}
},
filters: {
forB: function(b) {
console.log(b);
},
forC: function(b, str, age) {
console.log(b, str, age);
}
}
});
</script>
</html>
vue模板语法
猜你喜欢
转载自blog.csdn.net/a4561614/article/details/81034906
今日推荐
周排行