|
本帖最后由 周大胖子 于 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>
复制代码 一个简单的备份 |
|