vue 基础模板语法
本帖最后由 周大胖子 于 2018-11-15 22:41 编辑<template>
<div id="app">
<!-- <img alt="Vue logo" src="./assets/logo.png"> -->
<hr>
<!-- 最简单的数据绑定 -->
{{msg2}}
<hr>
<!-- html输出。利用v-html -->
<span v-html="laomo"></span>
<hr>
<!-- 简单的一个循环 -->
<ol>
<li v-for="item in arr">
{{item}}
</li>
</ol>
<hr>
<!-- 带索引值的一个循环 -->
<ol>
<li v-for="(item,key) in arr">
{{item}}-------{{key}}
</li>
</ol>
<hr>
<!-- 控制class -->
<p :class="{'red':!a}">class的控制</p>
<p :class="{'red':a,'blue':!a}">class的控制2</p>
<hr>
<!-- 循环控制的语法 给第一个和第三个分别加样式-->
<ol>
<li v-for="(item,key) in arr" :class="{'red':key==0 ,'blue':key==2}" >
{{item}}-------{{key}}
</li>
</ol>
<hr>
<!-- 条件判断语句 通过初始的 seen 是false 还是 true 来控制 这个p 显示不显示 -->
<p v-if="seen">现在你看到我了</p>
<hr>
<!-- 绑定属性利用v-bind -->
<div v-bind:title="lmtitle">鼠标移入</div>
<!-- 缩写就是 <div :title="lmtitle">鼠标移入</div> -->
<hr>
<!-- 绑定事件使用v-on 这个目前是错的-->
<div v-on:click="abc()">绑定点击事件 </div>
<div @click="ad()">简写绑定点击事件 </div>
<!--
<HelloWorld msg="Welcome to Your Vue.js App" laomo="事实上"/> -->
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
function abc(){
alert(1)
}
export default {
data(){ //业务逻辑定义的数据
return {
msg2:'哈哈哈'
,laomo:'<h2>apppppp<h2>'
,arr:['one','two','three']
,lmtitle:'这是一个title的值'
,seen:false
,a:false
}
}
,methods:{ //存放VUE的方法
abc:function(){
// alert(1)
// 获取数据
alert(this.msg2)
},
ad:function(){
alert(this.arr)
}
}
,name: 'app',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.red{
color:red;
}
.blue{
color:blue;
}
</style>
一个简单的备份
页:
[1]