过滤器
filters ：{
capitalize:function(){}
}
一次处理 {{ message | capitalize }}
多次处理,可以串联 {{ message | capitalize | touppercase }}
过滤器可以接受参数 <div>{{ msg | capitalize | touppercase2(1,2) }}</div>
第一个参数默认是值
touppercase2:function(value,num1,num2){
return value.toUpperCase()+num1+num2;
}
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<input type="text" v-model="msg">
<div v-once>{{msg}}</div>
<div v-html="br_"></div>
<div v-bind:title="msg1">鼠标放在我上面</div>
<a v-bind:href="'https://www.baidu.com'">渲染纯字符串</a>
<button v-bind:disabled="isDisabled">按钮</button>
<p>这是一个表达式{{1+3}}</p>
<!-- 三元表达式 -->
<p v-text="num ? '不是0' : '没数据'">这是一个显示的表达式</p>
<a v-bind:href="url" v-on:click.prevent="desLink">禁止跳到百度</a>
<div>{{ msg | capitalize }}</div>
<div>{{ msg | capitalize | touppercase }}</div>
<div>{{ msg | capitalize | touppercase2(1,2) }}</div>
<a :href="url">缩写方式,百度</a>
<button @click="click_">缩写方式的点击</button>
</div>
</body>
</html>
<script src="js/demo4.js"></script>
JS代码
window.onload = function(){
// 数据
var data = {
msg:'app',
br_:'<h1>你好！</h1>',
msg1:"你好！",
isDisabled:false,
num:1,
url:'https://www.baidu.com'
}
// 方法
var methods = {
desLink:function(){
console.log("禁止跳转")
},
click_:function(){
alert("点击事件！")
}
}
// 过滤器
var filters = {
capitalize:function(value){
console.log(value);
return value.split("").reverse().join("");
},
touppercase:function(value){
return value.toUpperCase();
},
touppercase2:function(value,num1,num2){
return value.toUpperCase()+num1+num2;
}
}
// 实例
var vm = new Vue({
el:'#app',
data:data,
methods:methods,
filters:filters
})
// 模板语法
/*
{{}} 插入 v-once 不能改变的值
v-html 渲染html
特性：{{}} 语法不能用在属性上 v-bind:属性名字
<div title="{{msg}}"></div> 错误
<a src="{{msg}}"></a> 错误
<div v-bind:title="msg1">鼠标放在我上面</div> 正确
渲染纯字符串
<a v-bind:href="https://www.baidu.com">渲染纯字符串</a> 错误
<a v-bind:href="'https://www.baidu.com'">渲染纯字符串</a> 正确
*/
/*
使用javascript表达式
<p>这是一个表达式{{1+3}}</p> 正确
<p v-if="num ? true : false">这是一个显示的表达式</p> 正确
<p>{{var a = 1}}</p> 错误
*/
/*
事件修饰符
prevent 阻止默认行为
*/
}
网友评论