Preface
The previous one said v-cloak Instructions , Let's do it today v-text,v-html,v-pre The learning of these three instructions
Data binding instructions
- v-text: Used to fill in plain text
- More concise than interpolation expressions , There is no flicker problem .
- v-html: For filling html fragment
- There are network security problems , Be vulnerable to XSS Tools , It should not be used on content submitted by users .
- Website internal data can be used , Third party data cannot be used
- v-pre: Used to fill in the original information
- Show the original information , Skip the compilation process
Example
<div id='app'> <!-- v-text There will be no flicker problems , So no need v-cloak --> <div v-text="msg"></div> <!-- Used to add html fragment --> <div v-html="mgs_html"></div> <!-- Used to display raw information , No need to go through vue The build process , That's the display {{msg_pre}}--> <div v-pre>{{mgs_pre}}</div> </div> <!-- To download vue.js --> <script type='text/javascript' src='js/vue.js'></script> <script> //1. html Writing labels in Chinese //2. introduce vue.js //3. Use vue Render the data . var vm = new Vue( { el: '#app', // Bound to the id Selectors data: { "msg": "hello world", "mgs_html": "<span>html</span>" } } ) </script>
Portal :2021 The latest test data & Position of big factory
Blogger : Test makes money ( One is not for 996 and 996 It's a test open yard farm )
motto : Focus on test development and automation operation and maintenance , Try to read, think and write , Lay the foundation for the financial freedom of an introverted life .
Content category : Technology upgrading , Workplace gossip , Career development , Reading and writing , Investment and Financing , Healthy life .
csdn:https://blog.csdn.net/ccgshigao
Blog Garden :https://www.cnblogs.com/qa-freeroad/
51cto:https://blog.51cto.com/14900374
WeChat official account : Test makes money ( Share exclusive content and resources on a regular basis )