Vue插值,指令,过滤器,监听属性及计算属性

1.插值

<!-- 定义边界 -->
<div id="app">
	<h2>文本</h2>
	{{msg}}
	<h2>html文本转义</h2>
	<div v-html="msg"></div>
	<h2>vue的属性</h2>
	<input type="text" value="msg">
	<br>
	<input v-bind:value="msg">
	<br>
	<input :value="msg">
	<h2>vue中的js支持</h2>
	{{str}}
	<br>
	{{str.substr(0,6).toUpperCase()}}
	<br>
	{{ number + 1 }}
	<br>
	{{ ok ? 'YES' : 'NO' }}
	<br>
	<span v-bind:id="'list-' + id">我的Id是js动态生成的</span>
</div>
<script>
	// 绑定边界
	new Vue({
		el: '#app',
		data() {
			return {
				msg: '<span style="color:red">hello vue</span>',
				str: 'hello vue...',
				number: 6,
				ok: false,
				id: 100
			}
		}
	})
</script>

2.指令

1. v-if/v-else/v-else-if

<h2>v-if/v-else/v-else-if</h2>
<input v-model="score">
<span v-if="score >= 90">优秀</span>
<span v-else-if="score >= 80">良好</span>
<span v-else-if="score >= 70">中等</span>
<span v-else-if="score >= 60">及格</span>
<span v-else="">不及格</span>

2. v-show

<span v-if="score > 100">不存在</span>
<br>
<h2>v-show</h2>
<span v-show="score > 100">不存在</span>

注:

• v-if 在不满足条件的时候是不存在的
• v-show 在不满足条件的时候是存在的, 只是隐藏了

3. v-for

<h2>v-for</h2>
<span v-for="a in arr">
	{{a}}
	<br>
</span>
<span v-for="a in likes">
	{{a}}
	{{a.id}}
	{{a.name}}
	<br>
</span>

data() {
	return {
		score: 80,
		arr: ['篮球', '足球', '排球'],
		likes: [
			{id: 1, name: '篮球'},
			{id: 2, name: '足球'}
		]
	}
},

4. v-bind
   属性
5. v-on
   绑定事件

<h2>v-on</h2>
<button v-on:click="do_">点我</button>
<button @click="do_">点我</button>
<br>
<input v-model="envname">
<br>
<button v-on:[envname]='do_'>魔法按钮</button>

envname: 'click'

魔法按钮获取输入框的值, 根据值来决定事件

6. v-model
   双向绑定

3.过滤器

<div id="app">
	<h2>基本过滤器</h2>
	{{str}}
	<br>
	{{str|filterA}}
	<h2>过滤器串联</h2>
	{{str|filterA|filterB}}
	<h2>过滤器传参</h2>
	{{str|filterC(2,8)}}
	<h2>引用外部js</h2>
	{{curtime}}
	<br>
	{{curtime|format}}
</div>
<script>
	Vue.filter('format', function(v) {
		return fmtDate(v, 'yyyy-mm-dd hh:MM:ss');
	})
	// 绑定边界
	new Vue({
		el: '#app',
		filters: {
			filterA: function(v) {
				return v.substring(0, 5);
			},
			filterB: function(v) {
				return v.substring(1, 2);
			},
			filterC: function(v, begin, end) {
				return v.substring(begin, end);
			}
		},
		data() {
			return {
				str: 'hello vue',
				curtime: new Date()
			}
		}
	})
</script>

date.js

//给Date类添加了一个新的实例方法format
Date.prototype.format = function (fmt) {
	//debugger;
    var o = {
        "M+": this.getMonth() + 1,                 //月份
        "d+": this.getDate(),                    //日
        "h+": this.getHours(),                   //小时
        "m+": this.getMinutes(),                 //分
        "s+": this.getSeconds(),                 //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds()             //毫秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
};

function fmtDate(date, pattern) {
	var ts = date.getTime();
    var d = new Date(ts).format("yyyy-MM-dd hh:mm:ss");
    if (pattern) {
        d = new Date(ts).format(pattern);
    }
    return d.toLocaleString();
};

4.监听属性及计算属性

1. 监听属性
   监听属性 watch，我们可以通过 watch 来响应数据的变化
   监听属性双向绑定
   修改m时, km的值会发生变化
   修改km时, m的值会发生变化

<h2>监听属性</h2>
m: <input v-model="m">
km: <input v-model="km">

watch: {
	m: function(v) {
		// 此时的v指的是被监听的属性
		this.km = parseInt(v) / 1000;
	},
	km: function(v) {
		this.m = parseInt(v) * 1000;
	}
},

3. 计算属性
   计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新
   计算属性单向绑定
   修改单价和数量时, 小计会变化
   

<table>
	<tr>
		<td>单价</td>
		<td>数量</td>
		<td>小计</td>
	</tr>
	<tr>
		<td><input v-model="danjia"></td>
		<td><input v-model="count"></td>
		<td>{{xiaoji}}</td>
	</tr>
</table>

computed: {
	xiaoji: function(v) {
		return this.danjia * this.count;
	}
}