vue常用指令

小狐狸崽子OvO

已于 2022-06-20 11:10:20 修改

阅读量109

点赞数 1

文章标签： vue.js javascript 前端

于 2022-06-19 19:44:05 首次发布

本文链接：https://blog.csdn.net/my_java_yon/article/details/125361465

版权

v-once: 只会执行一次渲染，当数据发生改变时，不会再变化

<div id="app">
    <p v-once>{{msg}}</p>
    <input v-model="msg" type="text" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vue = new Vue({
        el:"#app",
        data:{
            msg:'今天气温'
        }
    })
</script>

v-html:解析HTML标签，渲染普通文本

<body>
	<div id="app">
		<h2 v-html="msg1"></h2>
		<h2 v-html="msg2"></h2>
	</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
	var	app= new Vue({
		el:'#app',
		data:{
			msg1: '我是msg1',
			msg2: '<h3>我是msg2</h3>'
		}
	})
</script>

v-text: 用于渲染普通文本，但不能解析HTML标签

<body>
    <div id="app">
        <h2 v-text="msg1"></h2>
        <h2 v-text="msg2"></h2>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            msg1: '我是msg1',
            msg2: '<span>我是msg2</span>'
        }
    })
</script>

{{ }} 模板语法：不能识别HTML标签

<body>
    <div id="app">
        <h2>{{msg1}}</h2>
        <h2>{{msg2}}</h2>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            msg1: '我是msg1',
            msg2: '<span>我是msg2</span>'
        }
    })
</script>

v-model：双向绑定，可以实现表单元素和Medel中数据的双向绑定

<body>
    <div id="app">
        <input type="text" v-model="msg" />
        <h2>{{msg}}</h2>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const vm = new Vue({
    el: '#app',
    data: {
        msg: ''
    }
        })
</script>

v-bind: 绑定属性,比如:title，:class

<body>
    <div id="app">
        <h2 v-bind:title="msg">{{msg}}</h2>
        <input type="text" v-model="msg" />
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
      	  msg: 'Hello Vue!'
        }
    })
</script>

v-on: 监听 DOM事件

<body>
	<div id="app">
		<h2 v-on:click="run">{{msg}}</h2>
		<!-- 简写形式 -->
		<!-- <h2 @click="run"></h2> -->
	</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      msg: 'Hello Vue! 点击我'
    },
    methods: {
      run: function() {
      alert('Hello')
      }
    }
  })
</script>

v-if:条件成立渲染，条件不成立就不会渲染这个元素

<body>
<div id="app">
  <h2 v-if="num > 10">num大于10我就出现</h2>
  <h2 v-else-if="num < 10">num小于10我就出现</h2>
  <h2 v-else>你上边两条都不好使</h2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
  el: '#app',
  data: {
    num: 11
  }
})
</script>

v-show：简单的切换元素中的属性 display，如果条件不成立就会自动隐藏 display;none;

<body>
  <div id="app">
    <h2 v-show="num < 10">num小于10我就出现</h2>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
      num: 9
    }
    })
</script>

v-for：循环语句

<body>
  <div id="app">
    <p v-for="a in msg">{{a.name}}----{{a.sex}}-----{{a.age}} </p>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const vm = new Vue({
    el: '#app',
    data: {
    msg: [{
      name: "张三",
      sex: "女",
      age: "20"
    },
    {
      name: "李四",
      sex: "男",
      age: "18"}]
    }
  })
</script>