vue-02-指令和属性

<p v-cloak>{{ msg }}</p>

<h4 v-text="msg">!@#$%^*</h4>
<!-- msg得在data中定义 -->
<!-- 里面写再多东西也没用，!@#$%^*会被覆盖 -->

<h1	v-html="msg"></h1>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      msg: 'hello world',
      msg1: 'hello 世界',
      msg2: '<i>我是斜体</i>'
    }
  })
</script>

<input type="button" value="按钮" v-bind:title="msg3 + '123'" />
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      msg: 'hello world',
      msg1: 'hello 世界',
      msg2: '<i>我是斜体</i>',
      msg3: 'v-bind用于给属性绑定值'
    }
  })
</script>

<input type="button" value="按钮" v-bind:title="msg3" v-on:click="show()" />
<input type="button" value="yuanshengshow" @click="yuanshengshow"> 
<script>
  methods: {
    yuanshengshow: function () {
      alert('方法的原生写法')
    },
    show() {
      alert('v-on用于绑定事件')
    }
  }
</script>

<input type="text" v-model="msg" />

<p v-for="(item, i) in list">{{ i }}号 -- {{ item.name }} {{ item.sex }} {{ item.age }}</p>
<ul>
  <li v-for="(value, key, index) in obj">{{ index }} -- {{ key }} -- {{ value }</li>
</ul>
<li v-for="count in 10">{{ count }}</li>
<!-- 直接循环数字 -->

<p v-for="(item, i) in list" :key="item.age">
  <input type="checkbox">{{item.name}}--{{item.sex}}--{{i}}
</p>

<input type="button" value="change" @click="flag=!flag">
<p v-if="flag">v-if</p>
<p v-show="flag">v-show</p>