数据与方法

/ 前端 / Vue / 数据与方法

在单页组件里 this.  后面可以访问 data、prop、method 里的属性。注意嵌套的方法里的this不行，把this当参数传进去就好了。

使用js

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

vm.a == data.a // => true   vm是一个vue实例，它俩的指向是一样的

初始化后再向data里添加的数据不是响应式的

vm.$data === data // => true

vm.$el === document.getElementById('example') // => true

数据使用

•

在标签尖括号里的

引号直接包裹：<div v-bind:class="color">，color是变量

•

在标签内的

用{{}}包裹：<p>{{ number + 1*10/3 }}</p> 

方法使用

•

在尖括号里

@click="deleteEle(element)"

•

在标签里

{{reverse1()}}

		<div id="app">
			{{msg}}
			<p>Using mustaches: {{ rawHtml }}</p>
			<p v-html="rawHtml"></p>
			<div v-bind:class="color">test...</div>
			<p>{{ number + 1*10/3 }}</p>
			<p>{{ 1 == 1 ? 'YES' : 'NO' }}</p>
			<p>{{ message.split('').reverse().join('') }}</p>
			<p>{{reverse1()}}</p>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					msg: "hi vue",
					rawHtml: '<span style="color:red">this is should be red</span>',
					color: 'blue',
					number: 10,
					ok: 1,
					message: "vue"
				},
				methods:{
				reverse1:function(){
					return this.message.split('').reverse().join('')
				}}
			});
			vm.msg = "hi....";
		</script>
/////////////////////////////////////////////////////////////////////////////
var data = { a : 1 };
Object.freeze(data);//使这个对象不再响应式刷新view
var vm = new Vue({
	el   : "#app",
	data : data
});

数据与方法

评论区