夜光序言:
荒原上的光线以肉眼可见的速度,向西移动,浅黄葱绿交织的的草原被分成界限分明的阴阳两块。但很快阴的一面占了上风。太阳把最后一点光线都沉入水中,黑夜接管了大地,清晰变成混沌,希望堕落成空虚.风从世界的尽头刮过来,以吹枯拉朽的气势,宣告它在这荒岛的主权。
正文:Vue.js 模板语法~~~
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
文本
数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值:
文本插值
文本
数据绑定最常见的形式就是使用 {{...}}(双大括号)的文本插值:
文本插值
<div id="app"> <p>{{ message }}</p> </div>
属性
HTML 属性中的值应使用 v-bind 指令。
以下实例判断 class1 的值,如果为 true 使用 class1 类的样式,否则不使用该类:
<template>
<div id="content">
{{msg}}
<div v-html="test1"></div> <!--夜光:也可以这样传值-->
<label for="r1">修改颜色</label>
<input type="checkbox" v-model="use" id="r1">
<hr>
<br>
<div v-bind:class="'class1',use">
夜光:v-bind:class指令
</div>
</div>
</template>
<script>
export default {
data(){
return{
msg:'商品详情',
test1: '传值',
use: false
}
},
mounted() {
//获取get传值
console.log(this.$route.query);
}
}
</script>