VUE 简单属性操作

在main.js内配置路由及相应模板

import Vue from 'vue'
import App from './App'
// 引入router路由
import Router from 'vue-router'
// 引入项目的四个模块组件
import index from './components/index'
import d2 from './components/d2'
import login from './components/login'
import register from './components/register'
import cart from './components/cart'
import detail from './components/detail'
import test from './components/test'

// 使用router
Vue.use(Router)
// 定义路由
var routes = [
  {
    path: '/',
    component: index
  }
  ,{
  path: '/index',
  component: index
}, {
  path: '/d2',
  component: d2
}, {
  path: '/login',
  component: login
},{
  path: '/register',
  component: register
},{
  path: '/cart',
  component: cart
},{
  path: '/detail',
  component: detail
},{
  path: '/test',
  component: test
},
]

// 实例化路由
var vueRouter = new Router({
  mode:'history',
  routes:routes
})
// 创建和挂载根实例
new Vue({
  mode:'history',
  el: '#app',
  router: vueRouter,
  template: '<App></App>',
  components: { App }
})

　　具体模板代码：

<template>
    <div>
        
        <input type="text"  v-model="message">
        {{ message +"不好啊"}}
        <br>
        {{ message.split("").reverse().join("") }}
        <br>
        {{ message | reverse | uppercase }}
    <br>
        <div v-show="flag">
            你能看到我
        </div>

        <div v-if="num==10">
            num={{10}}
        </div>
        <div v-else-if="num=9">
                num=9
         </div>
        <div v-else>
            num != 10
        </div>
    <ul>

        <li v-for="item in tlist">
            {{ item.text }}
        </li>

    </ul>

    反转前：{{ message }}<br>
    反转后：{{ reverse_message }}
    <br>

    <table>
        <tr v-for="(item,index) in datalist">
            <td>{{ item.name }}</td>
            <td>

                <button @click="minus(index)">-</button>
                <input type="text"  v-model="item.num">
                <button @click="add(index)">+</button>

            </td>
        </tr>
    </table>

</div>
</template>
<script>
    export default {
      data () {
        return {

        message:'hello world',
        tlist:[{text:'汽车'},{text:'面包'}],
        flag:1,
        num:9,
        datalist:[{name:'汽车',num:2},{name:'飞机',num:0}]
        }
      },
      //监听属性
      computed:{

        reverse_message:function(){

            return this.message.split('').reverse().join('')
        }

      },
      //绑定事件
      methods:{
          add:function(index){
              this.datalist[index].num++;
          },
          minus:function(index){
              if(this.datalist[index].num > 0){
                this.datalist[index].num--;
              }else{
                  alert("商品不能为空")
              }
          },
      }
    }
</script>
    
<style>
</style>